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

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);">

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

1 个答案: