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>