谷歌地图标记管理器

Question

我遇到了一些问题，无法根据缩放级别显示两个不同的标记。例如，如果缩放级别小于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 文件，我需要遍历它以获取纬度和经度（和其他一些信息），然后创建一个标记，其中显示我的 JSON 文件中的所有内容，包括信息窗口等等。如果缩放大于 10，我能否创建第二个标记函数 createMarker2 并以某种方式调用它？对此任何帮助将不胜感激。我已查看了一些在线示例，但变得混淆了。谢谢提前。

- Ghatzi

Answer 1

你有一个被注释掉的关键代码段。你需要监听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
    }
});

我会把练习的其余部分留给你 - 但很可能你需要将每个标记添加到标记数组中，并迭代这些标记以有条件地打开/关闭它们。给你一个提示 - 实际上你可以向标记对象添加其他属性，在循环时进行检查。例如，你可以向标记对象添加 marker.LessThan10 = true; 然后，在循环时你可以查找此属性并根据情况调用 marker.setVisible();。

- ScottE

---

谢谢，我会尝试并告诉你。 - Ghatzi

Answer 2

建议您通过 http://www.jslint.com/ 运行您的代码 - 存在一些语法错误（主要是不必要的尾随 ;）。 < p > response来自哪里？这是代码中唯一涉及它的地方：

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

不要将createMarker函数嵌套在initialize函数内部。让它独立，并将创建标记及其信息窗口所需的数据作为参数传递给该函数。

- duncan

---

@duncan- 抱歉，我试图为您缩减代码并错过了一部分...变量响应= date.responseText;，我会检查我的语法并尝试您的建议。谢谢。 - Ghatzi