Question

相当新的...我正在尝试使用数组中的数据在Google地图上生成标记的动态列表（稍后将从Wordpress网站上的帖子信息动态填充）。

下面是使用静态数据的代码的简化版本。我遇到的问题是我似乎无法使用数组中的第五个值（即pinImageX）分配“icon”键。

后续工作正常......但显然会显示所有带一个针脚样式的标记

icon: pinImage1,

但使用follwoing不起作用

icon: locations[i][4],

我觉得我缺少一些语法来正确地为数组分配值:(

var locations = [
['Marker1', -50, 100, 1, 'pinImage1'],
['Marker2', -51, 101, 2, 'pinImage2'],
['Marker3', -52, 102, 3, 'pinImage3'],
];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: new google.maps.LatLng(-50, 100),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;
        var pinColor1 = "FF0000";
        var pinColor2 = "00FF00";
        var pinColor3 = "0000FF";

            var pinImage1 = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor1,
            new google.maps.Size(21, 34),
            new google.maps.Point(0,0),
            new google.maps.Point(10, 34));

            var pinImage2 = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor2,
            new google.maps.Size(21, 34),
            new google.maps.Point(0,0),
            new google.maps.Point(10, 34));

            var pinImage3 = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor3,
            new google.maps.Size(21, 34),
            new google.maps.Point(0,0),
            new google.maps.Point(10, 34));

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon: locations[i][4],
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

Answer 1

icon不接受字符串，而是直接引用google.maps.MarkerImage对象。您需要做的是将所有图标MarkerImage对象存储在关联数组或对象中（无论哪种适合您的想象。对象可能对甜蜜的原型函数很方便），并从那里返回。

以下是我在前雇主的网站上解决这个问题的方法：

        if (markerInfo.icon == undefined || markerInfo.icon == "") {
            for(var i=0; i<this.options.categories.length;i++) {
                if (this.options.categories[i].id == markerInfo.category) {
                    markerURLpic = this.options.categories[i].icon;
                }
            }
        }

这是标记生成功能的一部分。从本质上讲，它允许用户随便提交一个字符串，让其余的人进行查找。所有MarkerImage个对象都存储在this.options.categories。

中

希望这有帮助。

Answer 2

如果没有范围，变量变量的概念就不会很好，所以你需要做的是创建一个包含你的图像的对象作为范围：

var pinImages = {
    pinImage1:
        new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor1,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34)),

    pinImage2:
        new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor2,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34)),

    pinImage3:
        new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor3,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34))
};

然后你可以像这样引用图像：

marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    icon: pinImages[locations[i][4]],
    map: map
});

将数组中的值分配给键

2 个答案: