Google Maps JS API v3 - 简单的多标记示例

Google

使用Google Maps JS API v3可以轻松地在网页上添加多个标记点，以显示不同的地理位置。这对于展示商家分布、旅游景点或其他地理信息非常有用。在本文中，我们将介绍如何使用这个API来创建一个简单的多标记示例。

创建地图

首先，我们需要在网页上创建一个地图。为此，我们可以使用HTML和JavaScript代码。在HTML文件的body部分，添加一个div元素来容纳地图，如下所示：

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

然后，在JavaScript中，我们可以使用以下代码来创建地图：

Javascript
function initMap() {
  // 创建一个新的地图实例
  var map = new Google.maps.Map(document.getElementById('map'), {
    center: {lat: 40.7128, lng: -74.0060}, // 设置地图的中心点坐标
    zoom: 12 // 设置地图的缩放级别
  });
}

在上面的代码中，我们创建了一个新的地图实例，并将其放置在页面上具有id为"map"的div元素中。我们还设置了地图的中心点坐标为纽约市的经纬度，并将缩放级别设置为12。

添加标记

一旦我们创建了地图，我们就可以添加标记点来显示地理位置。我们可以使用Google Maps提供的Marker对象来实现这一点。以下是一个简单的例子：

Javascript
function initMap() {
  var map = new Google.maps.Map(document.getElementById('map'), {
    center: {lat: 40.7128, lng: -74.0060},
    zoom: 12
  });
  // 创建一个标记对象
  var marker = new Google.maps.Marker({
    position: {lat: 40.7128, lng: -74.0060}, // 设置标记的位置坐标
    map: map, // 将标记添加到地图上
    title: '纽约市' // 设置标记的标题
  });
}

在上面的代码中，我们创建了一个新的标记对象，并将其位置设置为纽约市的经纬度。然后，我们将该标记对象添加到地图上，并设置了标记的标题为"纽约市"。

添加多个标记

要添加多个标记点，我们只需要重复上述步骤。以下是一个将多个标记点添加到地图上的示例代码：

Javascript
function initMap() {
  var map = new Google.maps.Map(document.getElementById('map'), {
    center: {lat: 40.7128, lng: -74.0060},
    zoom: 12
  });
  // 创建第一个标记对象
  var marker1 = new Google.maps.Marker({
    position: {lat: 40.7128, lng: -74.0060},
    map: map,
    title: '纽约市'
  });
  // 创建第二个标记对象
  var marker2 = new Google.maps.Marker({
    position: {lat: 34.0522, lng: -118.2437},
    map: map,
    title: '洛杉矶'
  });
  // 创建第三个标记对象
  var marker3 = new Google.maps.Marker({
    position: {lat: 51.5074, lng: -0.1278},
    map: map,
    title: '伦敦'
  });
}

在上面的代码中，我们创建了三个不同的标记对象，并将它们分别添加到地图上。每个标记都具有不同的位置和标题。

通过Google Maps JS API v3，我们可以轻松地在网页上创建多个标记点来显示不同的地理位置。我们只需要创建地图实例，并使用Marker对象来添加标记点。这对于展示商家分布、旅游景点或其他地理信息非常有用。希望本文能够帮助您了解如何使用Google Maps JS API v3来创建一个简单的多标记示例。