google map的简单二次开发

来源：互联网发布：icon在线转换软件编辑：程序博客网时间：2024/06/10 06:33

Google Maps API是Google自己推出编程API，可

以让全世界对Google Map有兴趣的程序设计师自

行开发基于Google Maps的服务，建立自己的地图

网站。简单的讲就是google地图应用程序接口！

大家可以通过它免费方便的将Google Map链接到

自己的网页中去了。

第一步：

去http://www.google.com/apis/maps/signup.html 申

请一个KeyID 。

第二步：

使用获取的KeyID初步实现加载 Google 地图 API 。

我获得的KeyID为：

ABQIAAAA1ZWji3IS1WeH6kT7YeBfohTGaztpGLuuSIWMNLEggV4JozWCyxQhiZiv6ZFDc7ecTzUKgf0cDER8PA

将这段代码Copy到文本文档里保存成*.htm网页格式即

可，运行后加载 Google 地图 API就初步实现了。

代码为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">  <head>    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>    <title>Google Maps JavaScript API Example</title>    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA1ZWji3IS1WeH6kT7YeBfohTGaztpGLuuSIWMNLEggV4JozWCyxQhiZiv6ZFDc7ecTzUKgf0cDER8PA"      type="text/javascript"></script>    <script type="text/javascript">
    //<![CDATA[
    function load() {      if (GBrowserIsCompatible()) {        var map = new GMap2(document.getElementById("map"));        map.setCenter(new GLatLng(37.4419, -122.1419), 13);      }    }
    //]]>    </script>  </head>  <body onload="load()" onunload="GUnload()">    <div id="map" style="width: 500px; height: 300px"></div>  </body></html>
 
 第三步：
    
在地图上添加基本控件。
 
 map.addControl(new LargeMapControl()); //大型平移/缩放控件。 
 
map.addControl(new GOverviewMapControl);//缩略图 
 
map.addControl(new GMapTypeControl());//切换地图类型控件。
 
map.setCenter(new GLatLng(30.5374,114.3612 ), 14);//地图中心点改为武汉大学，缩放比例改为14。

第四步：

在地图上添加地图事件。

现在实现两个事件，一是在地图上随机标注10个点，二是

鼠标单击会标注一个点，单击到已标注点会取消该点的标

注。

第四步：

在地图上实现相关服务和一定功能。

添加本地搜索功能：

向您的 Maps API 应用程序中添加本地搜索功能

之前，要添加 Google AJAX Search API 的网

址。还需要加载该控件对象的样式表：

// Load the Code

<script src="http://www.google.com/uds/api?

file=uds.js&v=1.0&key=ABQIAAAA1ZWji3IS1WeH6kT7YeBfohTGaztpGLuuSIWMNLEggV4JozWCyxQhiZiv6ZFDc7ecTzUKgf0cDER8PA"

type="text/javascript"></script>

<script

src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js"
type="text/javascript"></script>

// Load the Style Sheets

<style type="text/css">

@import url("http://www.google.com/uds/css/gsearch.css");

@import url

(http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css);

// 创建地图

var map = new GMap2(document.getElementById

("map_canvas"));

// 创建本地搜索并将其添加到地图

var lsc = new google.maps.LocalSearch();

map.addControl(new google.maps.LocalSearch());

量算长度。鼠标单击地图后，地图上方会实时显

示所点击过的点的直线总长度。