码迷,mamicode.com
首页 > Windows程序 > 详细

GoogleMap API 调用基础学习

时间:2017-09-01 09:50:09      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:pre   格式   伦敦   参数   基础学习   oct   log   eid   对象   

  用JavaScript调用谷歌地图的API key:

  JS示例代码(很少写脚本语言,如有格式等错误请谅解):

<!-- DOCTYPE HTML -->
<html>
<head>
    <script 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzE9xAESye6Kde-3hT-6B90nfwUkcS8Yw&sensor=false">
    </script>

    <script>
        function initialize() {    //初始化
            var mapProp = {
                  center:new google.maps.LatLng(51.508742,-0.120850),     //地图初始中心:参数:经纬度(这里的坐标是英国伦敦)
                  zoom:5,     //初始地图缩放级别
                  mapTypeId:google.maps.MapTypeId.ROADMAP    //地图初始类型:显示普通的街道地图
                  /* mapTypeId:google.maps.MapTypeId.TERRAIN  //显示自然特征的地图 */
              };
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);    //创建一个 Map 对象
        }

        google.maps.event.addDomListener(window, load, initialize);    //窗口载入后通过执行 initialize() 函数来初始化 Map 对象,这样可以确保在页面完全载入后再加载 Google 地图
    </script>
</head>

<body>
    <!-- 地图宽度和高度有点大...载入可能会有点慢,用Google Chrome打开 -->
    <div id="googleMap" style="width:960px;height:680px;"></div>
</body>
</html>

 

  

GoogleMap API 调用基础学习

标签:pre   格式   伦敦   参数   基础学习   oct   log   eid   对象   

原文地址:http://www.cnblogs.com/darkchii/p/7461321.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!