谷歌地图标记管理器

google map marker manager

本文关键字：管理器 图标 地图 谷歌      更新时间：2023-09-26

我有一些问题显示2个不同的标记取决于缩放级别。例如，如果缩放级别小于10，则显示图标a，如果缩放级别大于10，则显示图标2。我一直在看市场经理，但是有点迷路了。下面是我的代码:

var url = "json.api";
function initialize() {
    var myLatlng = new google.maps.LatLng(0, 0);
    var myOptions = {
        maxZoom: 16,
        zoomControl: true,
        disableDefaultUI: true,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    downloadUrl(url, function(data) {
        var j = eval('(' + response + ')');
        var jlength = j.data.hotels.length;
        var bounds = new google.maps.LatLngBounds();
        for(i=0; i < jlength; i++) {
            var x = parseFloat(j.data.hotels[i].lat);
            var y = parseFloat(j.data.hotels[i].lon);
            var z = new google.maps.LatLng(x,y);
            var title = j.data.hotels[i].title;
            var hotel_id = j.data.hotels[i].id;
            var address = j.data.hotels[i].address;
            var star = j.data.hotels[i].star;
            var thumbnail = j.data.hotels[i].thumbnail;
            var contentstring = 'some html';
            var marker = createMarker();
            var infowindow = new google.maps.InfoWindow({
                content: contentstring
            }); 
            bounds.extend(z);
            map.fitBounds(bounds);
            //NOT SURE IF THESE ARE NEEDED  
            //  zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function(event) {
            //  google.maps.event.removeListener(zoomChangeBoundsListener);
            //  });
            //  google.maps.event.addListener(map, 'zoom_changed', function() {  
            //  });
        };
        if (map.getZoom() == 21) {map.setZoom(16);}
        if (map.getZoom() < 12) {map.setZoom(map.getZoom()+1);}
        //alert(map.getZoom())
        function createMarker(){
            var marker = new google.maps.Marker({
                position: z,
                map: map,
                title: title,
                html: contentstring,
                icon: 'icona.png'
            });
            google.maps.event.addListener(marker,'click',function(){
                infowindow.setContent(this.html);
                infowindow.open(map,marker);
            });
        };
    });
};

正如你所看到的，我有一个json文件，我循环获取lat和lng(和其他位)，然后创建一个标记，在我的json文件中显示所有的信息窗口等....我可以不只是创建第二个标记函数，即createMarker2和一些如何调用，如果缩放大于10?任何帮助都会很感激。我在网上看了一些例子，但是有些困惑。

你有一段注释掉了，这是至关重要的。您需要侦听zoom_changed事件。检查map.getZoom()不会完成任何事情，除非它在这个事件处理程序中。

google.maps.event.addListener(map, 'zoom_changed', function() {
    // your zoom logic goes here
    var zoom = map.getZoom();
    if (zoom < 10) {
      // do something  
    } else {
      // do something else
    }
});

我将把练习的其余部分留给您—但是您可能需要将每个标记添加到标记数组中，并迭代这些标记以有条件地打开/关闭它们。给你一个提示——你可以给标记对象添加额外的属性，以便在循环时检查。例如，您可以添加一个标记。LessThan10 = true;到标记对象。然后，在循环时，您可以在上面查找此属性并调用marker.setVisible();适用。

建议您通过http://www.jslint.com/运行您的代码-有几个语法错误(主要是跟踪;，不需要在那里)。

response从何而来?这是代码中唯一引用它的地方:

var j = eval('(' + response + ')');

不要在初始化函数中嵌套createMarker函数。使其独立，并将创建标记及其信息窗口所需的数据作为参数传递给该函数。

相关文章：