如何在google map api v3中更改每种类型的地图标记颜色

Question

我正在尝试使用Google地方和自动填充功能在搜索区域附近显示Atm位置。它工作正常，地图正确显示atm和银行位置，但它显示相同的地图标记，我想知道如何为每种类型显示不同的颜色标记。下面是我的代码。

var map, places, iw;
  var markers = [];
  var autocomplete;

  function initialize() {
    var myLatlng = new google.maps.LatLng(17.717063, 83.300310);
    var myOptions = {
      zoom: 14,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    places = new google.maps.places.PlacesService(map);
    google.maps.event.addListener(map, 'tilesloaded', tilesLoaded);
    autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'));
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      showSelectedPlace();
    });
  }

  function tilesLoaded() {
    google.maps.event.clearListeners(map, 'tilesloaded');
    google.maps.event.addListener(map, 'zoom_changed', search);
    google.maps.event.addListener(map, 'dragend', search);
    search();
  }

  function showSelectedPlace() {
    clearResults();
    clearMarkers();
    var place = autocomplete.getPlace();
    map.panTo(place.geometry.location);
    markers[0] = new google.maps.Marker({
      position: place.geometry.location,
      map: map
    });
    iw = new google.maps.InfoWindow({
      content: getIWContent(place)
    });
    iw.open(map, markers[0]);
  }

  function search() {
    var type;
    for (var i = 0; i < document.controls.type.length; i++) {
      if (document.controls.type[i].checked) {
        type = document.controls.type[i].value;
      }
    }

    autocomplete.setBounds(map.getBounds());

    var search = {
      bounds: map.getBounds()
    };

    if (type != 'establishment') {
      search.types = [ type ];
    }

    places.search(search, function(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        clearResults();
        clearMarkers();
        for (var i = 0; i < results.length; i++) {
          markers[i] = new google.maps.Marker({
            position: results[i].geometry.location,
            animation: google.maps.Animation.DROP
          });
          google.maps.event.addListener(markers[i], 'click', getDetails(results[i], i));
          setTimeout(dropMarker(i), i * 100);
          addResult(results[i], i);
        }
      }
    })
  }

  function clearMarkers() {
    for (var i = 0; i < markers.length; i++) {
      if (markers[i]) {
        markers[i].setMap(null);
        markers[i] == null;
      }
    }
  }

  function dropMarker(i) {
    return function() {
      markers[i].setMap(map);
    }
  }

  function addResult(result, i) {
    var results = document.getElementById("results");
    var tr = document.createElement('tr');
    tr.style.backgroundColor = (i% 2 == 0 ? '#F0F0F0' : '#FFFFFF');
    tr.onclick = function() {
      google.maps.event.trigger(markers[i], 'click');
    };

    var iconTd = document.createElement('td');
    var nameTd = document.createElement('td');
    var icon = document.createElement('img');
    icon.src = result.icon;
    icon.setAttribute("class", "placeIcon");
    icon.setAttribute("className", "placeIcon");
    var name = document.createTextNode(result.name);
    iconTd.appendChild(icon);
    nameTd.appendChild(name);
    tr.appendChild(iconTd);
    tr.appendChild(nameTd);
    results.appendChild(tr);
  }

  function clearResults() {
    var results = document.getElementById("results");
    while (results.childNodes[0]) {
      results.removeChild(results.childNodes[0]);
    }
  }

  function getDetails(result, i) {
    return function() {
      places.getDetails({
          reference: result.reference
      }, showInfoWindow(i));
    }
  }

  function showInfoWindow(i) {
    return function(place, status) {
      if (iw) {
        iw.close();
        iw = null;
      }

      if (status == google.maps.places.PlacesServiceStatus.OK) {
        iw = new google.maps.InfoWindow({
          content: getIWContent(place)
        });
        iw.open(map, markers[i]);        
      }
    }
  }

  function getIWContent(place) {
    var content = "";
    content += '<table class="style_infowin"><tr><td>';
    content += '<img class="placeIcon" src="' + place.icon + '"/></td>';
    content += '<td><b><a href="' + place.url + '">' + place.name + '</a></b>';
    content += '<tr class="iw_table_row"><td class="iw_attribute_name">Address:</td><td>' + place.vicinity + '</td></tr>';
    content += '</td></tr></table>';
    return content;
  }

Answer 1

您无法更改markeri颜色，但您可以更改标记图标，请参阅标记类参考以进行检查https://developers.google.com/maps/documentation/javascript/reference#Marker

您可以使用

更改图标

  marker.setIcon('newImage.png'); 

或者您可以使用正确的图标

创建标记

 var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
 var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: iconBase + 'schools_maps.png'    });

这是来自google doc https://developers.google.com/maps/documentation/javascript/tutorials/custom-markers#try_it_out

Answer 2

地方结果包含每个结果的图标网址。一种选择是使用它们。

places.search(search, function(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    clearResults();
    clearMarkers();
    for (var i = 0; i < results.length; i++) {
      markers[i] = new google.maps.Marker({
        position: results[i].geometry.location,
        animation: google.maps.Animation.DROP,
        icon: { url: results[i].icon, scaledSize: new google.maps.Size(20,20)}
      });
      google.maps.event.addListener(markers[i], 'click', getDetails(results[i], i));
      setTimeout(dropMarker(i), i * 100);
      addResult(results[i], i);
    }
  }
})

proof of concept fiddle

代码段

var map, places, iw;
var markers = [];
var autocomplete;

function initialize() {
  var myLatlng = new google.maps.LatLng(17.717063, 83.300310);
  var myOptions = {
    zoom: 14,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  places = new google.maps.places.PlacesService(map);
  google.maps.event.addListener(map, 'tilesloaded', tilesLoaded);
  autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'));
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    showSelectedPlace();
  });
}

function tilesLoaded() {
  google.maps.event.clearListeners(map, 'tilesloaded');
  google.maps.event.addListener(map, 'zoom_changed', search);
  google.maps.event.addListener(map, 'dragend', search);
  search();
}

function showSelectedPlace() {
  clearResults();
  clearMarkers();
  var place = autocomplete.getPlace();
  map.panTo(place.geometry.location);
  markers[0] = new google.maps.Marker({
    position: place.geometry.location,
    map: map
  });
  iw = new google.maps.InfoWindow({
    content: getIWContent(place)
  });
  iw.open(map, markers[0]);
}

function search() {
  var type = 'atm';
  /* for (var i = 0; i < document.controls.type.length; i++) {
    if (document.controls.type[i].checked) {
      type = document.controls.type[i].value;
    }
  } */

  autocomplete.setBounds(map.getBounds());

  var search = {
    bounds: map.getBounds()
  };

  if (type != 'establishment') {
    search.types = [type];
  }

  places.search(search, function(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      clearResults();
      clearMarkers();
      for (var i = 0; i < results.length; i++) {
        markers[i] = new google.maps.Marker({
          position: results[i].geometry.location,
          animation: google.maps.Animation.DROP,
          icon: {
            url: results[i].icon,
            scaledSize: new google.maps.Size(20, 20)
          }
        });
        google.maps.event.addListener(markers[i], 'click', getDetails(results[i], i));
        setTimeout(dropMarker(i), i * 100);
        addResult(results[i], i);
      }
    }
  })
}

function clearMarkers() {
  for (var i = 0; i < markers.length; i++) {
    if (markers[i]) {
      markers[i].setMap(null);
      markers[i] == null;
    }
  }
}

function dropMarker(i) {
  return function() {
    markers[i].setMap(map);
  }
}

function addResult(result, i) {
  var results = document.getElementById("results");
  var tr = document.createElement('tr');
  tr.style.backgroundColor = (i % 2 == 0 ? '#F0F0F0' : '#FFFFFF');
  tr.onclick = function() {
    google.maps.event.trigger(markers[i], 'click');
  };

  var iconTd = document.createElement('td');
  var nameTd = document.createElement('td');
  var icon = document.createElement('img');
  icon.src = result.icon;
  icon.setAttribute("class", "placeIcon");
  icon.setAttribute("className", "placeIcon");
  var name = document.createTextNode(result.name);
  iconTd.appendChild(icon);
  nameTd.appendChild(name);
  tr.appendChild(iconTd);
  tr.appendChild(nameTd);
  results.appendChild(tr);
}

function clearResults() {
  var results = document.getElementById("results");
  while (results.childNodes[0]) {
    results.removeChild(results.childNodes[0]);
  }
}

function getDetails(result, i) {
  return function() {
    places.getDetails({
      reference: result.reference
    }, showInfoWindow(i));
  }
}

function showInfoWindow(i) {
  return function(place, status) {
    if (iw) {
      iw.close();
      iw = null;
    }

    if (status == google.maps.places.PlacesServiceStatus.OK) {
      iw = new google.maps.InfoWindow({
        content: getIWContent(place)
      });
      iw.open(map, markers[i]);
    }
  }
}

function getIWContent(place) {
  var content = "";
  content += '<table class="style_infowin"><tr><td>';
  content += '<img class="placeIcon" height="20" width="20" src="' + place.icon + '"/></td>';
  content += '<td><b><a href="' + place.url + '">' + place.name + '</a></b>';
  content += '<tr class="iw_table_row"><td class="iw_attribute_name">Address:</td><td>' + place.vicinity + '</td></tr>';
  content += '</td></tr></table>';
  return content;
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
.placeIcon {
  height: 20px;
  width: 20px;
}
.cols {
  -webkit-columns: 3 150px;
  -moz-columns: 3 150px;
  columns: 3 150px;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<input id="autocomplete" />
<div class="cols" id="results"></div>
<div id="map_canvas"></div>