0

マーカー カテゴリを作成し、クリック時にマーカーを表示しようとしています...

たとえば、「食べる」、「銀行」、「興味のある場所」をクリックすると、それらのカテゴリのマーカーのみが生成されます。ここでライブを見ることができます

コード スニペットを次に示します。

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

1 に答える 1

0

最も簡単な方法は、マーカーを配列に割り当て、作成時に各マーカーを setMarker(null) にすることだと思います。カテゴリごとに個別の配列を使用するか、カテゴリ属性を持つオブジェクトの単一の配列を使用します。次に、ユーザーがカテゴリをクリックすると、そのマーカーごとに適切な配列と setMarker(map) を反復処理します。

于 2012-09-12T14:07:39.413 に答える