javascript - Google maps api v3 在一定缩放级别上显示标记

Question

我是 JS 和谷歌地图的新手，但我正在尝试使用自己的图 block 创建样式化 map ，并且我想根据缩放级别添加一些标记，因为当我的 map 处于 minZoom (0 ), 标记水平重复。所以我正在寻找一种方法来禁用标记的水平重复或根据缩放级别切换标记的方法。

  var ItalieTypeOptions = {
    getTileUrl: function (coord, zoom) {
        var normalizedCoord = getNormalizedCoord(coord, zoom);
        if (!normalizedCoord) {
            return null;
        }
        var bound = Math.pow(2, zoom);
        return 'http://mysite.fr/folder' + '/' + zoom + '/' + normalizedCoord.x + '/' + (bound - normalizedCoord.y - 1) + '.png';
    },
    tileSize: new google.maps.Size(256, 256),
    maxZoom: 4,
    minZoom: 0,
    name: 'Italie'
};
var ItalieMapType = new google.maps.ImageMapType(ItalieTypeOptions);

function initialize() {
    var myLatlng = new google.maps.LatLng(0, 0);
    var mapOptions = {
        center: myLatlng,
        zoom: 0,
        draggable: true,
        zoomControl: true,
        scaleControl: false,
        mapTypeControl: false,
        streetViewControl: false,
        backgroundColor: '#6AAECB',
        mapTypeControlOptions: {
            mapTypeIds: ['Italie']


        }


    };




    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    map.mapTypes.set('Italie', ItalieMapType);
    map.setMapTypeId('Italie');
    var locations = [
        ['Lorem', 20, -30],
        ['Ipsum', 20, 75],
        ['Dolor', 53, 45]
    ];
    var infowindow = new google.maps.InfoWindow();
    var image = {
        url: 'img/marker.png',
        size: new google.maps.Size(33, 41),
        origin: new google.maps.Point(0, 0),

    };




    for (i = 0; i < locations.length; i++) {

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            draggable: false,
            icon: image,

            animation: google.maps.Animation.DROP
        });
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
}



function getNormalizedCoord(coord, zoom) {
    var y = coord.y;
    var x = coord.x;

    var tileRange = 25 << zoom;  // I wrote 25 to display only one image but i'm not ure if it's the right way

    if (y < 0 || y >= tileRange) {
        return null;
    }

    if (x < 0 || x >= tileRange) {
        x = (x % tileRange + tileRange) % tileRange;
    }
    return {
        x: x,
        y: y
    };

}
google.maps.event.addDomListener(window, 'load', initialize);

谢谢

编辑

因此，我设法根据缩放级别显示一个标记:

   google.maps.event.addListener(map, 'zoom_changed', function () {

   var currentZoom = map.getZoom();

   if (currentZoom >= 3 && currentZoom <= 4) {
       marker.setMap(map);
       alert('lol');
   } else if (currentZoom == 0) {
       marker.setMap(null);
   } else if (currentZoom == 1) {
       marker.setMap(null);
   } else if (currentZoom == 2) {
       marker.setMap(null);
   } else if (currentZoom == 4) {
       marker.setMap(null);
   } else {
       marker.setMap(null);
   }
  });

我知道它根本不干净，但如果有人能帮我解决这个问题。这个问题是它只显示一个标记(最后一个 -> Location ['Dolor', 53, 45])，我想找到一种方法说“显示位置 var 中的所有标记”

谢谢

Answer 1

为你的标记创建一个数组，比如:

var allMarkers = [];

然后当你创建你的标记时，你可以将它们插入数组并简单地遍历你的数组以像这样设置 map ( map ):

allMarkers.push(marker);
//when you are ready to display them do the loop
for(var i = 0; i <= allMarkers.length-1; i++){
    allMarkers[i].setMap(map);
}