谷歌地图标记 - 请如何让这些显示

Posted 2023-05-06

【中文标题】谷歌地图标记 - 请如何让这些显示

【英文标题】：Google Maps Markers - how to get these to show please

【发布时间】：2021-11-09 01:49:35

【问题描述】：

我有我的功能齐全的地图，虽然我不知道为什么我不能让任何标记或集群进入这个？我的JS代码如下：

function initMap() 
  var map = new google.maps.Map(document.getElementById("map"), 
      zoom: 12,
      center:  lat: 51.40219, lng: -0.16890 
    );

    var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

    
  

//Coordinates for the various Memorials and Cemetries listed for the corresponding Hero that will be marked on the map.
// I used https://codepen.io/ahmadawais/pen/NQdWQx?editors=1010 to see how to do the below with the locations as this way it will show with the names of the memorials or cemeteries
var locations = [
  ['Private Richard Spearink - St Souplet British Cemetery',  lat: 50.05484, lng: 3.52440 , 1],
  ['Private Frederick Spearink - Mitcham War Memorial',  lat: 51.40219, lng: -0.16890 , 2],
  ['Private Frederick Spearink - Helles Memorial',  lat: 40.04597, lng: 26.17921, 2]
];

var markers = locations.map(function(location, i) 
  return new google.maps.Marker(
      position: location,
      label: labels[i % labels.length]
  );
);

var markerCluster = new MarkerClusterer(map, markers,  imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' );

谁能告诉我我需要添加或删除什么，因为我不确定为什么这不起作用？

【问题讨论】：

有两个问题：1. lat/lng 坐标没有正确传入（location 不是LatLngLiteral），2. 标记数组和markerCluster 初始化在@ 之外987654326@ 函数，所以会在地图初始化之前运行，见the example in the Google docs。 Working fiddle

【参考方案1】：

您没有正确传递标记的纬度和经度。

您的locations 数组是一个固定长度数组（“元组”），其中第二个是匹配LatLngLiteral 的lat 和lng 的对象。这是position in MarkerOptions 的正确值，但在您的locations.map 中，您传递的是location，这是整个元组。

因为每个条目都不是location，所以我将location重命名为locationTuple；名称与代码无关，但它确实更清楚地表明您需要使用locationTuple[1]（或location[1]）来引用position 的值。此时，您还可以将标签用作locationTuple[0]，而不是选择任意字母。

var locations = [
  ['Private Richard Spearink - St Souplet British Cemetery',  lat: 50.05484, lng: 3.52440 , 1],
  ['Private Frederick Spearink - Mitcham War Memorial',  lat: 51.40219, lng: -0.16890 , 2],
  ['Private Frederick Spearink - Helles Memorial',  lat: 40.04597, lng: 26.17921, 2]
];

var markers = locations.map(function(locationTuple, i)    // rename
  return new google.maps.Marker(
      position: locationTuple[1],                          // rename + add index 1
      label: locationTuple[0]                              // rename + add index 0
  );
);

【讨论】：

感谢您的帮助：)

@Andrew 不客气！如果这解决了您的问题，请记住accept an answer，这会将问题标记为已解决并给您少量的代表奖励。