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

Show custom image on a coordinate depending on zoom level

本文关键字：显示 自定义 图像 坐标 缩放      更新时间：2023-09-26

我想根据缩放级别在谷歌地图上显示自定义图像。已经在这里检查了答案，但我无法正常工作。

当第一次加载页面时（缩放级别3），在我使用zoom<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);
}
}
});

下面是谷歌的代码

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,

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

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

  • 缩放>4：显示两个标记
  • 缩放<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');
相关文章：