在Google Maps v3 API中为阵列中的标记clusterin选择数组中的多个标记 [英] Choosing multiple markers in an array for marker clusterin in Google Maps v3 API

问题描述

这个问题与这篇文章有关：

添加简单的标记clusterer谷歌地图

我想知道如何尽可能简单地调用数组中的标记。这是我的代码：

  var map = null; 
 
函数initialize（）{
 var myOptions = {
 zoom：8，
 center：new google.maps.LatLng（43.907787，-79.359741），
 mapTypeControl：true，
 mapTypeControlOptions：{
 style：google.maps.MapTypeControlStyle.DROPDOWN_MENU 
}，
 navigationControl：true，
 mapTypeId：google.maps。 MapTypeId.ROADMAP 
} 
 map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; 
 
 var mcOptions = {
 gridSize：50，
 maxZoom：15 
}; 
 var mc = new MarkerClusterer（map，[]，mcOptions）; 
 
 google.maps.event.addListener（map，'click'，function（）{
 infowindow.close（）; 
}）; 
 
 //向地图添加标记
 //设置三个带有信息窗口的标记
 
 var point = new google.maps.LatLng（43.65654，-79.90138 ）; 
 var marker1 = createMarker（point，'Abc'）; 
 
 var point = new google.maps.LatLng（43.91892，-78.89231）; 
 var marker2 = createMarker（point，'Abc'）; 
 
 var point = new google.maps.LatLng（43.82589，-79.10040）; 
 var marker3 = createMarker（point，'Abc'）; 
 
 var point = new google.maps.LatLng（43.65654，-79.90138）; 
 var marker4 = createMarker（point，'Abc'）; 
 
 var point = new google.maps.LatLng（43.91892，-78.89231）; 
 var marker5 = createMarker（point，'Abc'）; 
 
 var point = new google.maps.LatLng（43.82589，-79.10040）; 
 var marker6 = createMarker（point，'Abc'）; 
 
 var markerArray = new Array（marker1，marker2，marker3，marker4，marker5，marker6）; 
 
 mc.addMarkers（markerArray，true）; 
} 
 
 var infowindow = new google.maps.InfoWindow（{
 size：new google.maps.Size（150，50）
}）; 
 
函数createMarker（latlng，html）{
 var contentString = html; 
 var marker = new google.maps.Marker（{
 position：latlng，
 map：map，
 zIndex：Math.round（latlng.lat（）* -100000） << 5 
}）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.setContent（contentString）; 
 infowindow.open（map，marker）; 
}）; 
 
返回标记; 
} 
 
 window.onload = initialize; 
  

问题在于这部分：

  var markerArray = new Array（marker1，marker2，marker3，marker4，marker5，marker6）; 
  

是否有可能避免命名每个标记并使用类似于

  var markerArray = new Array（marker1-marker100）; 
  

解决方案

这里是 jsfiddle demo ：

让我知道您是否需要帮助理解

全局范围数组可以跟踪所有点和标记：

  var map = null; 
 var markerArray = []; //创建一个全局数组来存储标记
 var myPoints = [[43.65654，-79.90138，'ABC']，[43.91892，-78.89231，'DEF']，[43.82589，-79.10040，'GHA']] ; //创建全局数组来存储点在初始化函数中基本上循环遍历myPoints全局数组并创建基于标记的元素
  

在那。因此，要添加更多标记，只需将myPoints数组用于lat，lng和html：

  //添加标记到地图
 //根据myPoints数组中的点数设置
 for（var i = 0; i< myPoints.length; i ++）{
 createMarker（new google.maps .LatLng（myPoints [i] [0]，myPoints [i] [1]），myPoints [i] [2]）; 
} 
 
 mc.addMarkers（markerArray，true）; 
  

在creatMarker函数中，我们通过将局部var标记推入全局数组markerArray来更改以下内容：

 函数createMarker（latlng，html）{
 var contentString = html; 
 var marker = new google.maps.Marker（{
 position：latlng，
 map：map，
 zIndex：Math.round（latlng.lat（）* -100000） << 5 
}）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.setContent（contentString）; 
 infowindow.open（map，marker）; 
}）; 
 
 markerArray.push（marker）; //将局部var标记推入全局数组
} 
  

现在，如果您要添加新的所有你需要做的就是将lat，lng和html作为子数组添加到myPoints数组中：

  var myPoints = [[43.65654，-79.90138，'ABC']，[43.91892，-78.89231，'DEF']，[43.82589，-79.10040，'GHA']，[10，-22，'MY NEW MARKER']]; 
  

所以它就像[lat，lng，html]

This question is related to this post:

Adding simple marker clusterer to google map

I'm wondering how to call markers in an array as simple as possible. Here is my code:

var map = null;

function initialize() {
    var myOptions = {
        zoom: 8,
        center: new google.maps.LatLng(43.907787, -79.359741),
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var mcOptions = {
        gridSize: 50,
        maxZoom: 15
    };
    var mc = new MarkerClusterer(map, [], mcOptions);

    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
    });

    // Add markers to the map
    // Set up three markers with info windows

    var point = new google.maps.LatLng(43.65654, -79.90138);
    var marker1 = createMarker(point, 'Abc');

    var point = new google.maps.LatLng(43.91892, -78.89231);
    var marker2 = createMarker(point, 'Abc');

    var point = new google.maps.LatLng(43.82589, -79.10040);
    var marker3 = createMarker(point, 'Abc');

    var point = new google.maps.LatLng(43.65654, -79.90138);
    var marker4 = createMarker(point, 'Abc');

    var point = new google.maps.LatLng(43.91892, -78.89231);
    var marker5 = createMarker(point, 'Abc');

    var point = new google.maps.LatLng(43.82589, -79.10040);
    var marker6 = createMarker(point, 'Abc');

    var markerArray = new Array(marker1, marker2, marker3, marker4, marker5, marker6);

    mc.addMarkers(markerArray , true);
}

var infowindow = new google.maps.InfoWindow({
    size: new google.maps.Size(150, 50)
});

function createMarker(latlng, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });

    return marker;
}

window.onload = initialize;

The problem is this part:

var markerArray = new Array(marker1, marker2, marker3, marker4, marker5, marker6);

Is it possible to avoid naming every marker and use something like

var markerArray = new Array(marker1-marker100);

解决方案

Here is the jsfiddle demo:

Let me know if you need help understanding

Global Scope Array to keep track of all your points and markers:

var map = null;
var markerArray = []; //create a global array to store markers
var myPoints = [[43.65654, -79.90138, 'ABC'],[43.91892, -78.89231, 'DEF'],[43.82589, -79.10040, 'GHA']];  //create global array to store points

within initialize function basically loop through myPoints global array and create marker based on that. So, to add more marker, you just feed the myPoints array with lat, lng, and the html:

// Add markers to the map
// Set up based on the number of points in myPoints array 
for(var i=0; i<myPoints.length; i++){
     createMarker(new google.maps.LatLng(myPoints[i][0], myPoints[i][1]), myPoints[i][2]);
}

mc.addMarkers(markerArray , true);

Within creatMarker function we changed the following by pushing the local var marker into the global array markerArray:

function createMarker(latlng, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });

    markerArray.push(marker); //push local var marker into global array
}

Now if you were to add new marker all you have to do is add lat, lng, and html as a sub array into the myPoints array:

var myPoints = [[43.65654, -79.90138, 'ABC'],[43.91892, -78.89231, 'DEF'],[43.82589, -79.10040, 'GHA'], [10, -22, 'MY NEW MARKER']];  

so it's like [lat, lng, html]

这篇关于在Google Maps v3 API中为阵列中的标记clusterin选择数组中的多个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！