2

在这方面很新...我正在尝试使用数组中的数据在谷歌地图上生成一个动态标记列表（稍后将从 Wordpress 网站上的帖子信息动态填充）。

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

以下工作正常......但显然显示所有标记与一个针样式

icon: pinImage1,

但是使用以下方法不起作用

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));
    }
4

2 回答 2

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.

希望这可以帮助。

于 2013-03-29T09:21:17.790 回答
0

如果没有范围，变量变量的概念就不能很好地工作，所以您需要做的是创建一个包含您的 pin 图像的对象，该对象将用作范围：

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
});
于 2013-03-29T09:24:30.900 回答