创建标记类别&仅在点击时显示标记

时间:2012-06-11 16:13:13

标签: google-maps-api-3

我正在尝试创建标记类别并在点击时显示标记...

例如," Eat"," Banks"," Places of interest"并单击它们将只生成这些类别中的标记。你可以看到它HERE

以下是代码段:

//<![CDATA[

//<![CDATA[

var map = null;

var gmarkers = [];

var gicons = [];

var icon = [];

function initialize() {

var myOptions = {

zoom: 13,

center: new google.maps.LatLng(37.979183,-121.302381),

mapTypeControl: true,

mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},

navigationControl: true,

mapTypeId: google.maps.MapTypeId.ROADMAP

  }

map = new google.maps.Map(document.getElementById("map_canvas"),

                            myOptions);





google.maps.event.addListener(map, 'click', function() {

infowindow.close();

});



// Add markers to the map

// Set up three markers with info windows 







///////////////////////// EATS //////////////////////////////////////////////



var point = new google.maps.LatLng(37.988012,-121.311901); 

var image = 'icons/orangepointer.png';

var marker = createMarker(point,'<div style="width:205"><center><img src="icons/tigeryogurt.jpg" /></center><br><b>Tiger Yogurt</b><small><br>4343 Pacific Avenue<br>209.952.6042<br><br><a href="http://maps.google.com/maps?saddr=&daddr=' + point.toUrlValue() + '" target ="_blank">Get Directions<\/a></small><\/div>', image);

// this will be gmarkers[0]



var point = new google.maps.LatLng(37.987054,-121.311655); 

var image = 'icons/orangepointer.png';

var marker = createMarker(point,'<div style="width:205"><center><img src="icons/mwbakery.jpg" /></center><br><b>M&W Bakery<br>Cakes & Sandwiches</b><small><br>4343 Pacific Avenue<br>209.473.3828<br><br>On the web visit:<br><a href="http://www.mandwdutchamericanbakery.com" target ="_blank">MandWDutchAmericanBakery.com<\/a><br><br><a href="http://maps.google.com/maps?saddr=&daddr=' + point.toUrlValue() + '" target ="_blank">Get Directions<\/a></small><\/div>', image);

// this will be gmarkers[1]

目前,所有标记都会显示。我可以很容易地让标记不显示...但是,我试图只显示类别和单个列表只显示点击!

创建标记功能:

    }

var infowindow = new google.maps.InfoWindow(
{ 
size: new google.maps.Size(150,50)
});

function triggerClick(i) {
  google.maps.event.trigger(gmarkers[i],"click")
  };

function createMarker(latlng, html, img) {
var contentString = html;
var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: img,
    zIndex: Math.round(latlng.lat()*-100000)<<5
    });

google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString); 
    infowindow.open(map,marker);
});
gmarkers.push(marker);
}

1 个答案:

答案 0 :(得分:0)

我认为最简单的方法是将标记分配给数组,每个标记在创建时都有setMarker(null)。您可以为每个类别使用单独的数组,也可以为每个具有category属性的对象数组使用单独的数组。然后,当用户单击某个类别时,您将遍历相应的数组并为其每个标记设置setMarker(map)。