将数组中的值赋给键

Assigning a value from an array to a key

本文关键字：数组      更新时间：2023-09-26

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

下面是使用静态数据的代码的简化版本。我遇到的问题是，我似乎无法分配"图标"键与第五个值从数组(即pinImageX)。

下面的工作很好…但是很明显地显示了所有带有一个pin样式的标记

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

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中。

如果没有作用域，变量的概念就不能很好地工作，所以你需要做的是创建一个包含你的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
});
相关文章：