将用户图钉放在地图中

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>