google map的简单二次开发

最新推荐文章于 2022-06-21 14:40:38 发布

eagleliliyzx

最新推荐文章于 2022-06-21 14:40:38 发布

阅读量498

点赞数

分类专栏： googlemap 文章标签： googlemap 二次开发

googlemap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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 οnlοad="load()" οnunlοad="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。