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

Question

在以下代码中，有两个类别，我想显示自定义图标，而不是按类别标记。 对于这两个类别，我想为每个类别显示两个自定义图标。 但是我越来越难以理解它。

<!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>

Answer 1

为您的类别创建图标数组：

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]
});

概念证明

代码段：

 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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></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);">

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-02-10 17:57:38

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-02-10 17:57:38

解决方案1
1 已采纳 2016-02-10 17:57:38