谷歌地图集群标记数组格式

Question

我有简单的地图，其中包含数组中的集群和标记。标记是从位置数组中设置的，格式为：{lat: 36.4381369,lng: -93.0502099}，我有很多坐标要从其他地图添加，但它们的格式为：(36.4381369,-93.0502099) 我需要以某种方式将第一种格式转换为第二种格式。 我尝试了 LatLng(36.4381369,-93.0502099) 和其他组合，但标记/集群未显示在地图上。

这可行，但需要位置数组没有 lat: lang: 在每个数字前面。

function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          //center: {lat: -41.850033, lng: -87.6500523}
        });
        map.setCenter(new google.maps.LatLng(35.850033, -98.6500523));

        // Create an array of alphabetical characters used to label the markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps API.
        var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });

        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
            {zoomOnClick: false, imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }
      var locations = [
        {lat: 36.4381369,lng: -93.0502099},
        {lat: 36.2259742,lng: -92.6828437}
      ]

这不起作用。

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

        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
            {zoomOnClick: false, imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }
      var locations = [
        (36.4381369,-93.0502099),
        (36.2259742,-92.6828437)
      ]

Answer 1

如果您将位置更改为有效的嵌套 javascript 数组，您可以修改代码以使用它来创建标记：

var locations = [
  [36.4381369,-93.0502099],
  [36.2259742,-92.6828437]
];

然后像这样创建你的标记：

var markers = locations.map(function(location, i) {
  var pt = {lat: location[0], lng: location[1]};
  return new google.maps.Marker({
    position: pt,
    label: labels[i % labels.length]
  });
});

proof of concept fiddle

代码 sn-p：

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    //center: {lat: -41.850033, lng: -87.6500523}
  });
  map.setCenter(new google.maps.LatLng(35.850033, -98.6500523));

  // Create an array of alphabetical characters used to label the markers.
  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  // Add some markers to the map.
  // Note: The code uses the JavaScript Array.prototype.map() method to
  // create an array of markers based on a given "locations" array.
  // The map() method here has nothing to do with the Google Maps API.
  var markers = locations.map(function(location, i) {
    var pt = {
      lat: location[0],
      lng: location[1]
    };
    return new google.maps.Marker({
      position: pt,
      label: labels[i % labels.length]
    });
  });

  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, markers, {
    zoomOnClick: false,
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });
}
var locations = [
  [36.4381369, -93.0502099],
  [36.2259742, -92.6828437]
]
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/99a385c1/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>