我正在使用Google API设置地图，用户可以在周边地区选择商店，公园，银行等特定类型的地点。
那部分没有问题，但现在我希望为每个选项提供不同的标记。就像银行会有一个标记，而公园会有另一个标记。
现在他们都使用相同的标记，我很难理解如何使用Google Maps API。
到目前为止，我的工作已在此处显示。 http://codepen.io/carteralek/pen/zGmZzw
var map;
var infoWindow;
var service;
var markersArray = [];
var options = ['bank', 'gas_station', 'post_office', 'library', 'police', 'hospital', 'museum', 'movie_theater', 'train_station', 'place_of_worship', 'school', 'grocery_or_supermarket', 'restaurant', 'shopping_center', 'department_store', 'home_goods_store', 'park'];
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(42.494718, -92.346826),
zoom: 12,
styles: [{
stylers: [{
visibility: 'simplified'
}]
}, {
elementType: 'labels',
stylers: [{
visibility: 'off'
}]
}]
});
infoWindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
var myLatlng = new google.maps.LatLng(42.494718, -92.346826);
var bridgesMark = 'http://bridgessl.com/dev/wp-content/themes/ImpactMT/assets/img/mapMarker.png';
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: bridgesMark,
title: 'Hello World!'
});
google.maps.event.addListenerOnce(map, 'bounds_changed', performSearch);
}
function performSearch() {
clearMaps();
var clickedOptions = [];
for (var i = 0; i < options.length; i++) {
if (document.getElementById(options[i]).checked) {
clickedOptions.push(options[i]);
}
}
var request = {
bounds: map.getBounds(),
types: clickedOptions
};
console.log
service.radarSearch(request, callback);
}
function callback(results, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status);
return;
}
for (var i = 0, result; result = results[i]; i++) {
createMarker(result);
}
}
var image1 = 'http://bridgessl.com/dev/wp-content/themes/ImpactMT/assets/img/mapicons/bank.png';
var image2 = 'http://bridgessl.com/dev/wp-content/themes/ImpactMT/assets/img/mapicons/forest.png';
function createMarker(place) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: image1
});
markersArray.push(marker);
google.maps.event.addListener(marker, 'click', function() {
service.getDetails(place, function(result, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status);
return;
}
infoWindow.setContent(result.name);
infoWindow.open(map, marker);
});
});
}
for (var i = 0; i < options.length; i++) {
document.getElementById('options').innerHTML += '<input type="checkbox" id="' + options[i] + '" onclick="performSearch();"> ' + options[i] + '<br>'
}
function clearMaps() {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
google.maps.event.addDomListener(window, 'load', initialize);html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 70%;
margin: 0;
padding: 0;
}<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places,visualization"></script>
<div id="options"></div>
<div id="map-canvas"></div>
答案 0 :(得分：0)
何时选择在地图上绘制标记，您需要换出图标。它可以像改变这个一样简单：
var image1 = 'http://bridgessl.com/dev/wp-content/themes/ImpactMT/assets/img/mapicons/bank.png';
var image2 = 'http://bridgessl.com/dev/wp-content/themes/ImpactMT/assets/img/mapicons/forest.png';
// added in new param for iconpath
function createMarker(place, iconpath) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: iconpath // lets use the iconpath
});
...
并使用crateMarker(..., image1);
答案 1 :(得分：0)
一种选择是对每种类型进行单独搜索，将您喜欢的图标传递给搜索例程。
代码段
var map;
var infoWindow;
var service;
var markersArray = [];
var options = ['bank', 'gas_station', 'post_office', 'library', 'police', 'hospital', 'museum', 'movie_theater', 'train_station', 'place_of_worship', 'school', 'grocery_or_supermarket', 'restaurant', 'shopping_center', 'department_store', 'home_goods_store', 'park'];
function getLetteredIcon(letter) {
return "http://www.google.com/mapfiles/marker" + letter + ".png";
}
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(42.494718, -92.346826),
zoom: 12,
styles: [{
stylers: [{
visibility: 'simplified'
}]
}, {
elementType: 'labels',
stylers: [{
visibility: 'off'
}]
}]
});
infoWindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
var myLatlng = new google.maps.LatLng(42.494718, -92.346826);
var bridgesMark = 'http://bridgessl.com/dev/wp-content/themes/ImpactMT/assets/img/mapMarker.png';
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: bridgesMark,
title: 'Hello World!'
});
google.maps.event.addListenerOnce(map, 'bounds_changed', performSearch);
for (var i = 0; i < options.length; i++) {
document.getElementById('options').innerHTML += '<input type="checkbox" id="' + options[i] + '" onclick="performSearch();"> <img src=' + getLetteredIcon(String.fromCharCode('A'.charCodeAt(0) + i)) + ' height="20" /> ' + options[i] + '<br>';
}
}
function performSearch() {
clearMaps();
var clickedOptions = [];
for (var i = 0; i < options.length; i++) {
if (document.getElementById(options[i]).checked) {
performTypeSearch(options[i], getLetteredIcon(String.fromCharCode('A'.charCodeAt(0) + i)));
}
}
}
function performTypeSearch(type, icon) {
var request = {
bounds: map.getBounds(),
types: [type]
};
service.radarSearch(request, function(results, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(type + ":" + status);
return;
}
for (var i = 0, result; result = results[i]; i++) {
createMarker(result, icon);
}
});
}
function createMarker(place, icon) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: icon
});
markersArray.push(marker);
google.maps.event.addListener(marker, 'click', function() {
service.getDetails(place, function(result, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status);
return;
}
infoWindow.setContent(result.name);
infoWindow.open(map, marker);
});
});
}
function clearMaps() {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
google.maps.event.addDomListener(window, 'load', initialize);html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 70%;
margin: 0;
padding: 0;
}<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places,visualization"></script>
<div id="options"></div>
<div id="map-canvas"></div>