0

我有一个谷歌地图，它使用下面的代码显示多个标记。我想将其中一些分组并使用不同的图标，如果可能的话，我想设置类似

['Bondi Beach', -33.890542, 151.274856 type="restaurant"],
['Bondi RD', -33.89457, 151.26826 type="hotel"],

等等，然后根据它的类型显示不同的图标。

var markers1 = [
    ['Bondi Beach', -33.890542, 151.274856],
    ['Bondi RD', -33.89457, 151.26826],
    ['Wellington St', -33.89136, 151.26474],
    ['Bondi RD', -33.89457, 151.26826],
    ['Belleve Hill', -33.88673, 151.25839],
    ['Belleve RD', -33.88424, 151.25427],
    ['Blair St', -33.88509, 151.27058],
    ['Wollahra', -33.88951, 151.24500],
    ['Double Bay', -33.87783, 151.23985],
    ['Kings Cross', -33.87498, 151.21788],
    ['Shaw St', -33.88110, 151.27088],
    ['Coogee Beach', -33.923036, 151.259052],
    ['Cronulla Beach', -34.028249, 151.157507],
    ['Manly Beach', -33.80010128657071, 151.28747820854187],
    ['West of sydney', -33.87270, 151.15746],
    ['Maroubra Beach', -33.950198, 151.259302]
];


function initializehotell() {
    alert("init hotell");
    var latlng = new google.maps.LatLng(-33.92, 151.25);
    var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };
    var map1 = new google.maps.Map(document.getElementById("map_canvashotell"),myOptions);
    image = new google.maps.MarkerImage("http://www.mydomain.com/images/googlemap/info.png",new google.maps.Size(32, 45));
  shadowi = new google.maps.MarkerImage("http://www.mydomain.com/images/googlemap/shadow.png",new google.maps.Size(51, 37));
    var infowindow = new google.maps.InfoWindow(), marker, i;
    for (i = 0; i < markers1.length; i++) {  
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(markers1[i][1], markers1[i][2]),
            map: map1,
            shadow: shadowi,
          icon: image
        });

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

我想我必须在循环位置更改它： new google.maps.LatLng(markers1[i][1], markers1[i][2]) 不知何故，但我不确定如何。因此，任何输入都非常感谢，谢谢。

4

1 回答 1

0 
typeObject = {
    "hotel" : {
         "icon" : "HERE_IS_YOUR_ICON",
         "shadow" : "HERE_IS_YOUR_SHADOW",
         "icon_size" : [32, 52],
         "shadow_size" : [62, 72]          
     },
    // continue for every type
}

现在你有了一个 JSON 对象，它的元素本身就是 JSON 对象。你改变你的数组一点点例子如下，

['Bondi Beach', -33.890542, 151.274856, "hotel"]

所以当你创建一个标记

var icon = typeObjcet[markers1[i][3]]['icon'];
var shadow = typeObjcet[markers1[i][3]]['shadow'];
var iconSize = typeObjcet[markers1[i][3]]['icon_size']; 
var shadowSize = typeObjcet[markers1[i][3]]['shadow_size'];    

marker = new google.maps.Marker({
            position: new google.maps.LatLng(markers1[i][1], markers1[i][2]),
            map: map1,
            icon: new google.maps.MarkerImage(icon, new google.maps.Size(iconSize[0], iconSize[1])),
            shadow: new google.maps.MarkerImage(shadow, new google.maps.Size(shadowSize[0], shadowSize[1]))
 });

我猜它可能会被打磨，但这是一个拥有动态类型的粗略例子。您只需在 typeObject 上为您想要的每种类型填充数据，并通过初始数组中的 type 属性访问它。

更新

当然也可以是这样

  typeObject = {
        "hotel" : {
             "icon" : new google.maps.MarkerImage("red.png", new google.maps.Size(32, 42)),
             "shadow" : new google.maps.MarkerImage("shadow.png", new google.maps.Size(58, 68))         
         },
        // continue for every type
    }

    var icon = typeObject[markers1[i][3]]['icon'];
    var shadow = typeObject[markers1[i][3]]['shadow'];

    marker = new google.maps.Marker({
                position: new google.maps.LatLng(markers1[i][1], markers1[i][2]),
                map: map1,
                icon: icon,
                shadow: shadow
     });
于 2013-06-13T17:15:09.510 回答