Google 地图 API 初级使用

最新推荐文章于 2017-03-28 09:34:13 发布

wf42988

最新推荐文章于 2017-03-28 09:34:13 发布

阅读量77

点赞数

文章标签： Google JavaScript HTML ViewUI

一.一般查看地图可以直接在google地图找到该位置再到右上角点击分享链接中可以直接复制
二.但对于复杂的应用还是得自己写
   下面是一个简单的示例
    首先注册一个google帐号，http://code.google.com/intl/zh-CN/apis/maps/signup.html随后在上述地址上面生成对应的Key，比如我们得到的Key为ABQIAAAAhrsyA85kX5AhsROY61ghERSePc6gwvi5Rm1hdFkqvyx4TFycQxSUo39qJRxqmJjnbPYhTiCZ8RbpWQ，这个Key在加载google map对应的js的时候需要用到。

<html>
  <head >
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg" type="text/javascript"></script>
    <script type="text/javascript">
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        
        GEvent.addListener(map, "moveend", function() {
        var center = map.getCenter();
        document.getElementById("message").innerHTML = center.toString();});
        
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(32.058864,118.760576), 13);
        map.openInfoWindow(map.getCenter(),document.createTextNode("hohai university"));
      }
    }
    </script>
  </head>
  <body οnlοad="load()" οnunlοad="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
    <div id="message" style="width: 500px; height: 200px"></div>
  </body>
</html>

另外附google api文档