Question

我想在Google地图上显示自定义图片，具体取决于缩放级别。已经在这里检查了答案，但我无法让它正常工作。

首次加载页面时（缩放级别3），在我使用缩放＆lt; = 4时显示图像。但是当我放大时，图像会在缩放级别3上突然消失。

因此，它只适用于您第一次在浏览器中加载页面时的部分。

var seamarker, i;
var seamarkers = [];
var locations = [
[53.473190, -31.504191, 'image2.png'],
[32.473190, -31.504191, 'image3.png']
];
/* Get the markers from the array */
for (i = 0; i < locations.length; i++) {  
seamarker = new google.maps.Marker({
     position: new google.maps.LatLng(locations[i][0], locations[i][1]), 
     map: map,
     visible: true, // or false. Whatever you need.
     icon: locations[i][2],
     zIndex: 10

});
seamarkers.push(seamarker); // save all markers
}

/* Change markers on zoom */
google.maps.event.addListener(map, 'zoom_changed', function() {
zoom = map.getZoom(); 
if (zoom <= 4) {
for (i = 0; i < locations.length; i++) {
seamarkers[i].setMap(null);
}
} else {
for (i = 0; i < locations.length; i++) {
seamarkers[i].setMap(map);
}
}
});

下面是Google的代码

function initializeMaps() {
var myOptions = {
    center: new google.maps.LatLng(34.914164,12.469482),
    zoom: 3,
    zoomControl: false,
    panControl: false,
    disableDoubleClickZoom: true,
    mapTypeControl: false,
    scaleControl: false,
    scrollwheel: true,
    streetViewControl: false,
    draggable : true,
    overviewMapControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,

Answer 1

您最初会看到两个标记，因为两个标记都可见。

当您放大或缩小时，zoom_changed-event将会触发，您的代码当前将会：

zoom＆gt; 4：显示两个标记
zoom＆lt; = 4：隐藏两个标记

如果您只想绘制一个标记，但根据缩放级别使用位置/图标只创建一个标记，并在缩放更改时设置选项图标/位置：

    //create a single "blank" marker
    seamarker = new google.maps.Marker({zIndex: 10});

    //apply the listener
    google.maps.event.addListener(map, 'zoom_changed', function(){
      var i=(this.getZoom()<=4)?0:1;
      seamarker.setOptions({ map:this,
                             icon:locations[i][2],
                             position:new google.maps.LatLng(locations[i][0],
                                                             locations[i][1])})
    });

    //trigger the event to draw the initial marker
    google.maps.event.trigger(map,'zoom_changed');

根据缩放级别在坐标上显示自定义图像

1 个答案: