在Google地图标记上按类别添加自定义图标

在以下代码中有两个类别，我想按类别显示自定义图标而不是标记。对于这两个类别，我想为每个类别显示两个自定义图标。但它让我很难想出来。在Google地图标记上按类别添加自定义图标

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps JavaScript API v3 Example: Marker Categories</title> 
     <script type="text/javascript" 
       src="http://maps.google.com/maps/api/js?sensor=false"> </script> 
     <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script> 
    </head> 
    <body> 
    <div id="map" style="width: 400px; height: 300px;"></div> 

    <input type="checkbox" value="Show Group 1" onclick="displayMarkers(this,1);"> 
    <input type="checkbox" value="Show Group 2" onclick="displayMarkers(this, 2);"> 

    <script type="text/javascript"> 

    var beaches = [ 
     ['Bondi Beach', -33.890542, 151.274856, 1,], //category 1 
     ['Coogee Beach', -33.923036, 151.259052, 1], //category 1 
     ['Cronulla Beach', -34.028249, 151.157507, 2], //category 2 
     ['Manly Beach', -33.800101, 151.287478, 2], //category 2 
     ['Maroubra Beach', -33.950198, 151.259302, 2] //category 2 
    ]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: new google.maps.LatLng(-33.88, 151.28), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var markers = []; 

    var i, newMarker; 

    for (i = 0; i < beaches.length; i++) { 
     newMarker = new google.maps.Marker({ 
     position: new google.maps.LatLng(beaches[i][1], beaches[i][2]), 
     map: map, 
     title: beaches[i][0] 
    }); 

    newMarker.category = beaches[i][3]; 
    newMarker.setVisible(false); 

    markers.push(newMarker); 
    } 

    function displayMarkers(obj,category) { 
     var i; 

     for (i = 0; i < markers.length; i++) 
     { 
       if (markers[i].category === category) { 
        if ($(obj).is(":checked")) { 

         markers[i].setVisible(true); 
        } else { 
         markers[i].setVisible(false);  
        } 
       } 

      } 


    }  

    </script> 
    </body> 
    </html>

来源

2016-02-10 Rishabh

的可能重复的[I如何可以显示适合wthin不同类别的标记不同的图标？]（http://stackoverflow.com/questions/10432027/how-can-i -display-a-different-icon-for-markers-that-fit-wthin-different-categori） – geocodezip

为您的类别中创建的图标的排列：

var icons = ["", 
"http://maps.google.com/mapfiles/ms/micons/blue.png", 
"http://maps.google.com/mapfiles/ms/micons/green.png"];

用它来填充标记的icon属性：

for (i = 0; i < beaches.length; i++) { 
    newMarker = new google.maps.Marker({ 
    position: new google.maps.LatLng(beaches[i][1], beaches[i][2]), 
    map: map, 
    icon: icons[beaches[i][3]], 
    title: beaches[i][0] 
});

proof of concept fiddle

代码片段：

var beaches = [ 
 
    ['Bondi Beach', -33.890542, 151.274856, 1], //category 1 
 
    ['Coogee Beach', -33.923036, 151.259052, 1], //category 1 
 
    ['Cronulla Beach', -34.028249, 151.157507, 2], //category 2 
 
    ['Manly Beach', -33.800101, 151.287478, 2], //category 2 
 
    ['Maroubra Beach', -33.950198, 151.259302, 2] //category 2 
 
]; 
 

 
var icons = ["", 
 
    "http://maps.google.com/mapfiles/ms/micons/blue.png", 
 
    "http://maps.google.com/mapfiles/ms/micons/green.png" 
 
]; 
 

 
var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 10, 
 
    center: new google.maps.LatLng(-33.88, 151.28), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
}); 
 

 
var markers = []; 
 

 
var i, newMarker; 
 

 
for (i = 0; i < beaches.length; i++) { 
 
    newMarker = new google.maps.Marker({ 
 
    position: new google.maps.LatLng(beaches[i][1], beaches[i][2]), 
 
    map: map, 
 
    icon: icons[beaches[i][3]], 
 
    title: beaches[i][0] 
 
    }); 
 

 
    newMarker.category = beaches[i][3]; 
 
    newMarker.setVisible(false); 
 

 
    markers.push(newMarker); 
 
} 
 

 
function displayMarkers(obj, category) { 
 
    var i; 
 

 
    for (i = 0; i < markers.length; i++) { 
 
    if (markers[i].category === category) { 
 
     if ($(obj).is(":checked")) { 
 

 
     markers[i].setVisible(true); 
 
     } else { 
 
     markers[i].setVisible(false); 
 
     } 
 
    } 
 

 
    } 
 

 

 
}

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
#map { 
 
    height: 90%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div> 
 

 
<label>blue</label> 
 
<input type="checkbox" value="Show Group 1" onclick="displayMarkers(this,1);"> 
 
<label>green</label> 
 
<input type="checkbox" value="Show Group 2" onclick="displayMarkers(this, 2);">

来源

2016-02-10 17:57:38 geocodezip

太完美了！感谢您的杰出答案。现在只有一个问题，如果你也可以建议我。点击标记时，应显示位置名称或消息。它在多个标记上很棘手。 – Rishabh

如果这回答了你的问题，请[接受它]（http://meta.stackoverflow.com/questions/5234/how-does-accepting-an-answer-work）。打开infowindow将是另一个问题。请首先做一些研究，如果不完全相同的问题有很多类似的问题。 – geocodezip

在Google地图标记上按类别添加自定义图标

回答

相关问题