代码之家  ›  专栏  ›  技术社区  ›  kaklon

如何在谷歌地图API中更改缩放标记更改

  •  12
  • kaklon  · 技术社区  · 14 年前

    我有一个地图,我想改变标记图像,当变焦大于5。
    我知道如何检测变焦,但我不知道如何改变图像。

    2 回复  |  直到 11 年前
        1
  •  30
  •   Daniel Vassallo    14 年前

    那应该很容易。我看了一下您的代码,看起来您没有保留对标记的引用。这是你应该做的第一件事。

    因此,创建一个 markers 数组:

    var markers = [];
    

    在你的内心 setMarkers() 函数,将每个新标记推入此数组:

    markers.push(marker);
    

    现在,您可以使用for循环迭代标记: for (i = 0; i < markers.length; i++) .

    理想情况下,我们还应该将每个标记的两个图标存储在标记对象本身中。Javascript对象可以很容易地用自定义属性进行扩充。为此,您可能需要更改 设置标记() 功能如下:

    function setMarkers(map, map_bounds, locations, iconLevel1, iconLevel2) {
      for (var i = 0; i < locations.length; i++) {
        var loc = locations[i];
        var myLatLng = new google.maps.LatLng(loc[1], loc[2]);
    
        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          icon: iconLevel1,    // iconLevel1 by default
          title: loc[0],
          zIndex: loc[3]
        });
    
        // Add custom properties to the marker object
        marker.iconLevel1 = iconLevel1;
        marker.iconLevel2 = iconLevel2;
    
        // Add the new marker to the markers array
        markers.push(marker);
    
        map_bounds.extend(myLatLng);
      }
    }
    

    最后,您似乎已经在处理 zoom_changed 事件正确。首先,我建议检查 zoomLevel 1 2 ,以便不重复 标记 如果不需要数组。如果有变化,只需呼叫 setIcon() 方法,并传递自定义属性 iconLevel1 iconLevel2 取决于缩放级别:

    var zoomLevel = 1;
    
    google.maps.event.addListener(map, 'zoom_changed', function() {
      var i, prevZoomLevel;
    
      prevZoomLevel = zoomLevel;
    
      map.getZoom() < 5 ? zoomLevel = 1 : zoomLevel = 2;
    
      if (prevZoomLevel !== zoomLevel) {
        for (i = 0; i < markers.length; i++) {
          if (zoomLevel === 2) {
            markers[i].setIcon(markers[i].iconLevel2);
          }
          else {
            markers[i].setIcon(markers[i].iconLevel1);
          }
        }
      }
    });
    

    上面应该可以工作,但您可能希望按如下方式重构for循环,使用 the subscript notation instead of the dot notation 要访问标记的属性:

    for (i = 0; i < markers.length; i++) {
      markers[i].setIcon(markers[i]['iconLevel' + zoomLevel]);
    }
    
        2
  •  1
  •   tim    11 年前

    我不喜欢写很多代码,所以我用这种方式为自己的项目解决了这个问题:

    var z = myMap.getZoom();
    var m = new google.maps.Marker({
        position    : new google.maps.LatLng(myLat, myLng),
        icon        : myMarker( z ),
        map         : myMap
    });
    

    函数 myMarker() 是一个自定义函数,我在其中传递缩放级别并返回纯图像数据。您可以很容易地使用字符串串联生成一个URL:

    icon        : 'myMarkerIcon_level'+ z +'.png'