Google Maps API地图应用示例分享_javascript技巧

Google Maps API地图应用示例分享_javascript技巧_

2014-10-23 22:56:42 [小大] 已经帮助：人解决问题

效果（新版Firefox中测试）：

代码：

<!DOCTYPE>JMrHTML5中文学习网 - HTML5先行者学习网
<html>JMrHTML5中文学习网 - HTML5先行者学习网
<head>JMrHTML5中文学习网 - HTML5先行者学习网
  <meta http-equiv="content-type" content="text/html;charset=utf-8">JMrHTML5中文学习网 - HTML5先行者学习网
  <title>Google Map</title>JMrHTML5中文学习网 - HTML5先行者学习网
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>JMrHTML5中文学习网 - HTML5先行者学习网
  <script type="text/javascript">JMrHTML5中文学习网 - HTML5先行者学习网
    function init()JMrHTML5中文学习网 - HTML5先行者学习网
    {JMrHTML5中文学习网 - HTML5先行者学习网
      // 获取当前位置JMrHTML5中文学习网 - HTML5先行者学习网
      navigator.geolocation.getCurrentPosition(function(position)JMrHTML5中文学习网 - HTML5先行者学习网
        {JMrHTML5中文学习网 - HTML5先行者学习网
          var coords = position.coords;JMrHTML5中文学习网 - HTML5先行者学习网
          // 设定地图参数，将当前位置的经纬度设置为中心点JMrHTML5中文学习网 - HTML5先行者学习网
          var latlng = new google.maps.LatLng(coords.latitude,coords.longitude);JMrHTML5中文学习网 - HTML5先行者学习网
          var myOptions = JMrHTML5中文学习网 - HTML5先行者学习网
          {JMrHTML5中文学习网 - HTML5先行者学习网
            // 放大倍数JMrHTML5中文学习网 - HTML5先行者学习网
            zoom:14, JMrHTML5中文学习网 - HTML5先行者学习网
            // 标注坐标JMrHTML5中文学习网 - HTML5先行者学习网
            center:latlng,JMrHTML5中文学习网 - HTML5先行者学习网
            // 地图类型JMrHTML5中文学习网 - HTML5先行者学习网
            mapTypeId:google.maps.MapTypeId.ROADMAPJMrHTML5中文学习网 - HTML5先行者学习网
          };JMrHTML5中文学习网 - HTML5先行者学习网
          var map1;JMrHTML5中文学习网 - HTML5先行者学习网
          // 显示地图JMrHTML5中文学习网 - HTML5先行者学习网
          map1 = new google.maps.Map(document.getElementById('map'),myOptions);JMrHTML5中文学习网 - HTML5先行者学习网
          // 创建标记JMrHTML5中文学习网 - HTML5先行者学习网
          var marker = new google.maps.Marker(JMrHTML5中文学习网 - HTML5先行者学习网
            {JMrHTML5中文学习网 - HTML5先行者学习网
              position:latlng,JMrHTML5中文学习网 - HTML5先行者学习网
              map:map1JMrHTML5中文学习网 - HTML5先行者学习网
            });JMrHTML5中文学习网 - HTML5先行者学习网
          // 设定标注窗口，附上注释文字JMrHTML5中文学习网 - HTML5先行者学习网
          var infowindow = new google.maps.InfoWindow(JMrHTML5中文学习网 - HTML5先行者学习网
            {JMrHTML5中文学习网 - HTML5先行者学习网
              content:"当前位置"JMrHTML5中文学习网 - HTML5先行者学习网
            });JMrHTML5中文学习网 - HTML5先行者学习网
          // 打开标注窗口JMrHTML5中文学习网 - HTML5先行者学习网
          infowindow.open(map1,marker);JMrHTML5中文学习网 - HTML5先行者学习网
        });JMrHTML5中文学习网 - HTML5先行者学习网
    }JMrHTML5中文学习网 - HTML5先行者学习网
  </script>JMrHTML5中文学习网 - HTML5先行者学习网
</head>JMrHTML5中文学习网 - HTML5先行者学习网
<body onload="init()">JMrHTML5中文学习网 - HTML5先行者学习网
  <div id="map"></div>JMrHTML5中文学习网 - HTML5先行者学习网
</body>JMrHTML5中文学习网 - HTML5先行者学习网
</html>

Google Maps JavaScript API v3（参考文档）：https://developers.google.com/maps/documentation/javascript/basics

百度地图API的参考文档：http://developer.baidu.com/map/jsmobile.htm

（责任编辑：）