將使用者圖釘放在地圖中

Created: November-22, 2018

請注意，如果你不熟悉 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>