将自定义参数添加到谷歌地图图标答案

【问题标题】：Add custom parametres into google map Icon将自定义参数添加到谷歌地图图标
【发布时间】：2014-06-04 00:11:40
【问题描述】：

我需要数组中的图标，比较后取一个图标数组，作为通过JSON获取数据，因此无法将它们作为对象告诉他们。

创建图标并将它们放在数组中：

EMarkers = [];
var icon1e = {
                nameIco: icon1e,
                url: "./icon/sight.png",
                size: new google.maps.Size(16, 16),
                anchor: new google.maps.Point(8, 8),
                };

                EMarkers.push(icon1e);

                var icon2e = {
                nameIco: icon2e,
                url: "./icon/museum21.png",
                size: new google.maps.Size(16, 16),
                anchor: new google.maps.Point(8, 8),
                };

                EMarkers.push(icon2e);

                var icon3e = {
                nameIco: icon3e,
                url: "./icon/hram.png",
                size: new google.maps.Size(16, 16),
                anchor: new google.maps.Point(8, 8),
                };

                EMarkers.push(icon3e);

但是对象Icon中的自定义选项不会传输，还有marker。

jQuery.getJSON(url, function (json) {

        jQuery.each(json, function(i, entry){
            var _id = entry.event_id;
            var _point = new google.maps.LatLng(entry.options.lat,entry.options.lng);

            jQuery.each(EMarkers, function(idx, data){
                if (data.nameIco == entry.options.icon){ 
                    entry.options.icon = data;
                }           
            });


            createMarker( _point, entry.options);

        });

});

 function createMarker(point, options){
        var marker = new google.maps.Marker({
            position: point, 
            map: map,
            icon: options.icon,
            title: options.title,
            id: options.id
        });
    }

问题是我无法将 JSON 图标仅用作字符串作为标记，这是我能看到的从数组创建对象的唯一方法，但如何从中获得所需的值？

【问题讨论】：

标签： javascript json google-maps icons google-maps-markers

【解决方案1】：

对象在创建后可用，因此在创建对象时不能使用对它们的引用。

这将产生预期的结果：

var icon1e = {
             url: "./icon/sight.png",
             size: new google.maps.Size(16, 16),
             anchor: new google.maps.Point(8, 8),
            };

 icon1e.nameIco = icon1e;

...但我不建议这样做，它会创建一个循环引用。

我不确定您要达到什么目的，但无论如何您的比较都可能失败，因为通常无法通过 JSON 传输像 google.maps.Size 这样的类的实例。

你最好对 JSON 项（例如“icon3e”）的options.icon（也许你已经这样做了）使用字符串，并为EMarkers 使用对象而不是数组，而不是你可以轻松比较@987654325 @ 和 EMarkers 的密钥

EMarkers = {
  icon1e = {
                url: "./icon/sight.png",
                size: new google.maps.Size(16, 16),
                anchor: new google.maps.Point(8, 8),
                },
  icon2e = {
                url: "./icon/museum21.png",
                size: new google.maps.Size(16, 16),
                anchor: new google.maps.Point(8, 8),
                },
  icon3e = {
                url: "./icon/hram.png",
                size: new google.maps.Size(16, 16),
                anchor: new google.maps.Point(8, 8),
                }
};

.....

jQuery.getJSON(url, 函数 (json) {

    jQuery.each(json, function(i, entry){
        var _id = entry.event_id;
        var _point = new google.maps.LatLng(entry.options.lat,entry.options.lng);

        jQuery.each(EMarkers, function(key){
            if (key === entry.options.icon){ 
                entry.options.icon = data;
            }           
        });


        createMarker( _point, entry.options);

    });

});

在这种情况下可以删除内部循环： jQuery.getJSON(url, 函数 (json) {

    jQuery.each(json, function(i, entry){
        var _id = entry.event_id;
        var _point = new google.maps.LatLng(entry.options.lat,entry.options.lng);
        entry.options.icon=EMarkers[entry.options.icon]
        createMarker( _point, entry.options);

    });

});

【讨论】：

【解决方案2】：

谢谢，您对格式字符串的看法是正确的：

决定很简单：变量名必须是字符串，然后进行比较

改为：

var icon1e = {
                nameIco: icon1e,
                url: "./icon/sight.png",
                size: new google.maps.Size(16, 16),
                anchor: new google.maps.Point(8, 8),
                };

用途：

var icon1e = {
                nameIco: "icon1e",
                url: "./icon/sight.png",
                size: new google.maps.Size(16, 16),
                anchor: new google.maps.Point(8, 8),
                };

它有效:)

【讨论】：