google-maps-api-3google-maps-api-3入門


備註

官方Google文檔

關於本主題中的示例

  • YOUR_API_KEY需要由您自己的應用程序API密鑰替換。您可以獲取API密鑰並在Google API控制台中對其進行配置。

基本

CSS

以下是Google建議您使用的最低CSS規則,在單獨的CSS文件中或HTML樣式標記內,例如<style type="text/css">...</style>

html, body {
    height: 100%; 
    margin: 0; 
    padding: 0;
}

#map {
    height: 400px;
}
 

HTML

Google建議您在Web應用程序中聲明真正的DOCTYPE

<!DOCTYPE html>
 

使用以下腳本標記在您的應用程序中加載Google Maps JavaScript API。

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize">
</script>
 

創建一個HTML元素來保存地圖。

<div id="map"></div>
 

JavaScript的

這是一個顯示地圖標記的非常簡單的示例。

function initialize() {

    // Create a LatLng object
    // We use this LatLng object to center the map and position the marker
    var center = new google.maps.LatLng(50,0);

    // Declare your map options
    var mapOptions = {
        zoom: 4,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // Create a map in the #map HTML element, using the declared options
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);

    // Create a marker and place it on the map
    var marker = new google.maps.Marker({
        position: center,
        map: map
    });
}
 

完整的例子

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #map {
                height: 400px;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script>
            function initialize() {

                // Create a LatLng object
                // We use this LatLng object to center the map and position the marker
                var center = new google.maps.LatLng(50, 0);

                // Declare your map options
                var mapOptions = {
                    zoom: 4,
                    center: center,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                // Create a map in the #map HTML element, using the declared options
                var map = new google.maps.Map(document.getElementById("map"), mapOptions);

                // Create a marker and place it on the map
                var marker = new google.maps.Marker({
                    position: center,
                    map: map
                });
            }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize" async defer></script>
    </body>

</html>
 

演示

JSFiddle演示

更多信息

有關更多信息,請閱讀本主題的備註

將用戶的圖釘放在地圖中。


請注意 ,如果您不熟悉google maps api,您可以閱讀先前的示例(基礎知識)以了解這個小例子。


  • 首先,初始化地圖

您可以在HTML代碼中添加一個地圖的元素,並像這樣添加CSS:

<!DOCTYPE html>
<html>
<head>
<style>
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
 

現在,你必須使用這樣的應答程序腳本將谷歌地圖庫添加到你的代碼中:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
 

您可以通過google api密鑰在代碼中重新設置YOUR_API_KEY。這是獲取密鑰的鏈接

接下來,您必須在代碼中寫入一個函數,作為地圖的回調(或初始化函數)。在這裡,我們只需要添加一個小功能,巫婆,你可以在谷歌找到這裡

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }
 

現在,您通常在屏幕上有一個基本地圖。你可以在谷歌上找到完整的代碼。


  • 第二,找到用戶位置。

要請求用戶位置,導航器提供了一個非常簡單的功能:

navigator.geolocation.getCurrentPosition(showPosition);
 

請注意,此函數接受參數。如果地理位置成功,則調用此函數。

我們必須創建這個功能。 :)

function showPosition(position) {
    alert (position);    
}
 

此功能非常簡單,我們必須在更新後才能在用戶位置繪製標記。

我們在這裡使用的地理位置功能非常簡單。您可以獲得w3schools的完整文檔。

在他看來,代碼看起來像這樣:

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <style>
    /* Always set the map height explicitly to define the size of the div
      * element that contains the map. */
    
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    var map;
    navigator.geolocation.getCurrentPosition(showPosition);
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
      });
    }
    function showPosition(position) {
      console.log(position);
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>

</html>
 

  • 第三,用標記顯示用戶在地圖上的位置。

要在地圖上顯示標記,您可以使用示例“基礎”中的功能:

// Create a marker and place it on the map
var marker = new google.maps.Marker({
    position: position,
    map: map
});
 

我不會非常準確地詳細說明這些代碼。您可能現在可以使用此代碼創建標記: new google.maps.Marker({}); ,你通過'標記選項'進入擁抱。您可以在此處查閱Google文檔。

另請注意 ,您可以使用position參數非常輕鬆地指定標記的位置。

現在我們必須修改showPosition 函數。

您可以像這樣簡單地訪問變量位置的lat和lng:

  var markerPosition={};
  markerPosition.lat=position.coords.latitude;
  markerPosition.lng=position.coords.longitude;
 

像這樣,谷歌了解如何簡單地訪問lat和lng值。

現在我們添加修改showPosition 函數以在用戶位置添加標記。

function showPosition(position) {
    var markerPosition={};
    markerPosition.lat=position.coords.latitude;
    markerPosition.lng=position.coords.longitude;
    // Create a marker and place it on the map
    var marker = new google.maps.Marker({
        position: markerPosition,
        map: map
    });
}
 

  • 最後,您的代碼應如下所示:
<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <style>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    var map;
    navigator.geolocation.getCurrentPosition(showPosition);
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
      });
    }
    function showPosition(position) {
      var markerPosition={};
      markerPosition.lat=position.coords.latitude;
      markerPosition.lng=position.coords.longitude;

      // Create a marker and place it on the map
      var marker = new google.maps.Marker({
        position: markerPosition,
        map: map
      });
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>

</html>