初学google map（一）

最新推荐文章于 2020-01-06 17:10:10 发布

longlongmylove

最新推荐文章于 2020-01-06 17:10:10 发布

阅读量972

点赞数

文章标签： google 浏览器 api function button firebug

本文链接：https://blog.csdn.net/longlongmylove/article/details/4633341

版权

在学习google map之前，必须申请google map API密钥。一个地图 API 密钥只对一个“目录”或域有效。如果是用于在本地测试的须申请本地密钥，即http://localhost。如果是用于网站使用，则必须为网站域名申请专用API密钥。以下为申请google map API密钥地址：http://code.google.com/intl/zh-CN/apis/maps/signup.html
接下来看第一个地图：（注意替换key为申请的api key）
<script src="http://maps.google.com/maps?
file=api&v=2&key=ABQIAAAA1j86tnUDFv8OAtC8dZVtKRT8YXSkg32FmSueYimfV_yj5DJguRRW5eQHwEBk10jwkDxLKNltT_kuQA" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
//注意:在Javacript代码块里嵌入CDATA段可以防止不兼容Javacript的浏览器不产生错误信息
//这是一个编写网页的好习惯

var map; //全局GMap

//网页加载时用于初始化Google地图

    function load()
    {
      if (GBrowserIsCompatible()) //检查浏览器兼容性
                                  //如果浏览器无法满足加载Google地图的最低条件，则不进行进一步操作
                                  //这是编写Google地图网页的一个值得推荐的做法
      {
        //创建GMap2对象
        map = new GMap2(document.getElementById("map"));

        //显示地图，并设置其中心，缩放值
        //缩放级别设得比较小，这样就可以看到世界地图了
        map.setCenter(new GLatLng(37.4419, -122.1419), 2);
      }
    }

    //移动地图中心到北京
    function moveMap()
    {
      //北京的经纬度分别为39.92, 116.46
      map.panTo(new GLatLng(39.92, 116.46));
    }

    //改变地图类型为混合地图
    function changeMapType()
    {
      map.setMapType(G_HYBRID_MAP);
    }
    //]]>
    </script>
网页代码：

<body οnlοad="load()" οnunlοad="GUnload()">
    
    <div id="map" style="width: 500px; height: 300px"></div>
    <input type="button" value="移动地图中心" οnclick="moveMap()" />
    <input type="button" value="改变地图类型" οnclick="changeMapType()" />
</body>

学习的最好资料是google map 的官方API文档，google map主要用JavaScript来进行开发，要注意浏览器的兼容性问题。测试可以在Firefox浏览器中用firebug进行调试。

longlongmylove

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学google map（一）

在学习google map之前，必须申请google map API密钥。一个地图 API 密钥只对一个“目录”或域有效。如果是用于在本地测试的须申请本地密钥，即http://localhost。如果是用于网站使用，则必须为网站域名申请专用API密钥。以下为申请google map API密钥地址：http://code.google.com/intl/zh-CN/apis/maps/sign
复制链接

扫一扫