Google Maps API地圖應用示例分享

2019-11-20 14:00:00

字體：大中小

來源：轉載

供稿：網友

效果（新版Firefox中測試）：

代碼：

<!DOCTYPE>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title>Google Map</title>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    function init()
    {
      // 獲取當前位置
      navigator.geolocation.getCurrentPosition(function(position)
        {
          var coords = position.coords;
          // 設定地圖參數，將當前位置的經緯度設置為中心點
          var latlng = new google.maps.LatLng(coords.latitude,coords.longitude);
          var myOptions = 
          {
            // 放大倍數
            zoom:14, 
            // 標注坐標
            center:latlng,
            // 地圖類型
            mapTypeId:google.maps.MapTypeId.ROADMAP
          };
          var map1;
          // 顯示地圖
          map1 = new google.maps.Map(document.getElementById('map'),myOptions);
          // 創建標記
          var marker = new google.maps.Marker(
            {
              position:latlng,
              map:map1
            });
          // 設定標注窗口，附上注釋文字
          var infowindow = new google.maps.InfoWindow(
            {
              content:"當前位置"
            });
          // 打開標注窗口
          infowindow.open(map1,marker);
        });
    }
  </script>
</head>
<body onload="init()">
  <div id="map"></div>
</body>
</html>