可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have a custom Google map with markers of artist locations. I want to make 8 different categories of markers. I read about having to make arrays of markers and assigning a category, but I honestly don't know where to start..

I think this question comes close to what I want: Toggle on/off Google map markers by category. Tried to get that working, but to no avail, I just have too little knowledge.

Here's my HTML. I have a map and a few checkboxes ready, the checkboxes aren't used yet.

<body onload="initialize()">

<div id="map_container">
    <div id="map_canvas" style="width:700px; height:350px">
    </div>
</div>

<div id="map_filter">
    <form action="#">
      <input type="checkbox" id="beeldend" onclick="displayMarkers(1)" /><label>Beeldende kunst</label><br />
      <input type="checkbox" id="film" onclick="displayMarkers(2)" /><label>Film/fotografie</label><br />
      <input type="checkbox" id="dans" onclick="displayMarkers(3)" /><label>Dans</label>
    </form> 
</div>

</body>

And here's my JS. I have a cat1 shadow and cat1 icon, that should be 8 different kinds, but this maybe isn't the way to do it so I kept it at just one cat for readability. Then I have one marker (art1) that has it's own pos, shadow etc.

function initialize() {
var latlng = new google.maps.LatLng(52.0840356, 5.1546501);
var settings = {
    zoom: 13,
    center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

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

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+
    '<div id="bodyContent">'+
    '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'+
    '</div>'+
    '</div>';
var infowindow = new google.maps.InfoWindow({
    content: contentString
});

var cat1Shadow = new google.maps.MarkerImage('images/shadow.png',
    new google.maps.Size(130,50),
    new google.maps.Point(0,0),
    new google.maps.Point(65, 50)
);

var cat1Icon = new google.maps.MarkerImage('images/beeldend.png',
    new google.maps.Size(100,50),
    new google.maps.Point(0,0),
    new google.maps.Point(50,50)
);

var art1Pos = new google.maps.LatLng(52.0840356, 5.1546501);
var art1Marker = new google.maps.Marker({
    position: art1Pos,
    map: map,
    icon: cat1Icon,
    shadow: cat1Shadow,
    title:"Beeldende kunst",
    zIndex: 4
});

google.maps.event.addListener(art1Marker, 'click', function() {
  infowindow.open(map,art1Marker);
});

}

So.. What's the best way to create different arrays of markers and toggle their visibility with check boxes?

Also, I'd like to be able to assign addresses to markers in stead of looking up the coordinates.

Thank you

回答1:

The best way to create different arrays of markers is to do something like this. You said you had 8 categories of markers, so do this 8 times.

var locations = [

                 ['Shanghai', 31.232, 121.47, 5885],
                 ['Beijing', 39.88, 116.40, 6426],
                 ['Guangzhou', 23.129, 113.264, 4067],
                 ['Shenzhen', 22.54, 114.05, 3089],
                 ['Hangzhou', 30.27, 120.15, 954],
                 ['Hong Kong', 22.39, 114.10, 1885]
               ];

function getMarkers() {
    for (i = 0; i < locations.length; i++) { 
            marker[i] = new MarkerWithLabel({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                draggable: false,
                map: map,
                    labelContent: locationsCA[i][3],
                icon: new google.maps.MarkerImage(iconArray[i]),
                labelAnchor: new google.maps.Point(30, 0),
                labelClass: "labels", // the CSS class for the label
                 labelStyle: {opacity: 0.75}
            });

As for your second question about toggle visibility with check boxes, I don't know how to make check boxes, but the toggle feature can be easily implemented with an event trigger. Whether it is a marker click or a zoom, or any other event (check the documentation for events), you get set up an action following that event. Here is an example.

google.maps.event.addListener(map,'zoom_changed',function () {
         if (map.getZoom() >= 4) {
            hideMarkers();          
         }
}

And your hideMarkers() function with use this command to make it invisible

marker.setVisible(false);

Hope that helps

回答2:

you can store them in an array and toggle the visbility with marker.setMap(null) for invisible and marker.setMap(map) for visible.

see the example from the docs: https://developers.google.com/maps/documentation/javascript/examples/marker-remove

Toggle hide/show Google map markers

问题:

回答1:

回答2:

收藏的人(0)

Toggle hide/show Google map markers

问题:

回答1:

回答2:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮