我正在使用Google Map API，它工作正常，但我想更改标记颜色，就像假设男性意味着黄色标记，女性意味着我想要显示蓝色标记。
怎么办呢？
如果您想了解性别详细信息，请点击标记，然后从此处弹出窗口我显示性别详细信息，如他是男性还是女性
var res = {
"status": "success",
"count": 3,
"data": [{
"tripId": "1",
"pickupLatitude": "12.956413",
"pickupLongitude": "77.695380",
"empName": "Arun",
"gender":"Male",
"pickupTime" : "9.30 AM"
},
{
"tripId": "1",
"pickupLatitude": "12.956107",
"pickupLongitude": "77.694994",
"empName": "Kohila",
"gender":"Female",
"pickupTime" : "9.40 AM"
},
{
"tripId": "1",
"pickupLatitude": "12.955639",
"pickupLongitude": "77.694932",
"empName": "Dinesh",
"gender":"Male",
"pickupTime" : "9.50 AM"
}
],
"travlledLocation": [
{
"Travlinglatitude": "12.956664",
"Travlinglongitude": "77.696829"
},
{
"Travlinglatitude": "12.956604",
"Travlinglongitude": "77.696480"
},
{
"Travlinglatitude": "12.956523",
"Travlinglongitude": "77.696021"
},
{
"Travlinglatitude": "12.956413",
"Travlinglongitude": "77.695380"
},
{
"Travlinglatitude": "12.956335",
"Travlinglongitude": "77.695029"
},
{
"Travlinglatitude": "12.956230",
"Travlinglongitude": "77.694997"
},
{
"Travlinglatitude": "12.956107",
"Travlinglongitude": "77.694994"
},
{
"Travlinglatitude": "12.955934",
"Travlinglongitude": "77.694970"
},
{
"Travlinglatitude": "12.955639",
"Travlinglongitude": "77.694932"
},
{
"Travlinglatitude": "12.955380",
"Travlinglongitude": "77.694902"
}
]
};
var geocoder;
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var locations = res.travlledLocation.map(function(o, i) {
return [
i == 0 ? 'Start' : i == res.travlledLocation.length - 1 ? 'Going From Here' : i,
o.Travlinglatitude,
o.Travlinglongitude,
i + 1
]
});
var waypoints = res.data.map(function(o) {
return {
empName: o.empName,
pickupTime: o.pickupTime,
gender: o.gender,
lat: o.pickupLatitude,
lng: o.pickupLongitude
}
});
initialize();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true
});
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
//center: new google.maps.LatLng(-33.92, 151.25), //
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var request = {
travelMode: google.maps.TravelMode.DRIVING
};
for (i = 0; i < locations.length; i++) {
if (locations[i][3] == 1 || locations[i][3] == locations.length) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
i: locations[i][0],
icon: {
url : locations[i][0]=='Start' ?'http://www.myiconfinder.com/uploads/iconsets/256-256-8055c322ae4049897caa15e5331940f2.png' : 'http://www.myiconfinder.com/uploads/iconsets/256-256-76f453c62108782f0cad9bfc2da1ae9d.png',
scaledSize: locations[i][0]=='Start'? new google.maps.Size(40, 40) :new google.maps.Size(45, 45)
}
});
}
google.maps.event.addListener(marker, 'click', (function(marker, infowindow) {
return function() {
infowindow.setContent(marker.i);
infowindow.open(map, marker);
};
})(marker, infowindow));
if (i == 0) request.origin = marker.getPosition();
else if (i == locations.length - 1) request.destination = marker.getPosition();
}
//push the waypoints to request.waypoints array
waypoints.forEach(function(v, i) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(v.lat, v.lng),
map: map,
icon: {
url: 'http://www.myiconfinder.com/uploads/iconsets/256-256-56165014858e6dbadaf3ba00d782f125.png',
scaledSize: new google.maps.Size(45, 45)
},
data: v
});
google.maps.event.addListener(marker, 'click', (function(marker, infowindow) {
return function() {
infowindow.setContent('<b>Employee Name : </b>' + marker.data.empName + '<br><b>pickupTime : </b>' + marker.data.pickupTime+ '<br><b>Gender : </b>' + marker.data.gender);
infowindow.open(map, marker);
};
})(marker, infowindow));
})
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
google.maps.event.addDomListener(window, "load", initialize); html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<div id="map"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7lDrYPDmJz1JsQh2rbWA9uRZHcFk_xJY">
</script>
我的更新问题
从这里我点击绿色图标意味着显示开始，然后点击红色图标意味着显示从这里开始，而不是这个我想显示地址，请你更新你的答案 -
答案 0 :(得分：1)
您可以使用解决方案
var res = {
"status": "success",
"count": 3,
"data": [{
"tripId": "1",
"pickupLatitude": "12.956413",
"pickupLongitude": "77.695380",
"empName": "Arun",
"gender":"Male",
"pickupTime" : "9.30 AM"
},
{
"tripId": "1",
"pickupLatitude": "12.956107",
"pickupLongitude": "77.694994",
"empName": "Kohila",
"gender":"Female",
"pickupTime" : "9.40 AM"
},
{
"tripId": "1",
"pickupLatitude": "12.955639",
"pickupLongitude": "77.694932",
"empName": "Dinesh",
"gender":"Male",
"pickupTime" : "9.50 AM"
}
],
"travlledLocation": [
{
"Travlinglatitude": "12.956664",
"Travlinglongitude": "77.696829"
},
{
"Travlinglatitude": "12.956604",
"Travlinglongitude": "77.696480"
},
{
"Travlinglatitude": "12.956523",
"Travlinglongitude": "77.696021"
},
{
"Travlinglatitude": "12.956413",
"Travlinglongitude": "77.695380"
},
{
"Travlinglatitude": "12.956335",
"Travlinglongitude": "77.695029"
},
{
"Travlinglatitude": "12.956230",
"Travlinglongitude": "77.694997"
},
{
"Travlinglatitude": "12.956107",
"Travlinglongitude": "77.694994"
},
{
"Travlinglatitude": "12.955934",
"Travlinglongitude": "77.694970"
},
{
"Travlinglatitude": "12.955639",
"Travlinglongitude": "77.694932"
},
{
"Travlinglatitude": "12.955380",
"Travlinglongitude": "77.694902"
}
]
};
var geocoder = new google.maps.Geocoder();
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var locations = res.travlledLocation.map(function(o, i) {
return [
((i == 0) || (i == res.travlledLocation.length - 1)) ? {lat: o.Travlinglatitude, lng: o.Travlinglongitude} : i,
o.Travlinglatitude,
o.Travlinglongitude,
i + 1
]
});
var waypoints = res.data.map(function(o) {
return {
empName: o.empName,
pickupTime: o.pickupTime,
gender: o.gender,
lat: o.pickupLatitude,
lng: o.pickupLongitude
}
});
initialize();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: true
});
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
//center: new google.maps.LatLng(-33.92, 151.25), //
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var request = {
travelMode: google.maps.TravelMode.DRIVING
};
for (i = 0; i < locations.length; i++) {
if (locations[i][3] == 1 || locations[i][3] == locations.length) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
i: locations[i][0],
icon: {
url : locations[i][0]=='Start' ?'http://www.myiconfinder.com/uploads/iconsets/256-256-8055c322ae4049897caa15e5331940f2.png' : 'http://www.myiconfinder.com/uploads/iconsets/256-256-76f453c62108782f0cad9bfc2da1ae9d.png',
scaledSize: locations[i][0]=='Start'? new google.maps.Size(40, 40) :new google.maps.Size(45, 45)
}
});
}
google.maps.event.addListener(marker, 'click', (function(marker, infowindow) {
geocoder.geocode({
'latLng': new google.maps.LatLng(marker.i.lat, marker.i.lng)
}, function (results, status) {
if (status ==
google.maps.GeocoderStatus.OK) {
if (results[1]) {
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
} else {
alert('No results found');
}
} else {
//alert('Geocoder failed due to: ' + status);
}
});
})(marker, infowindow));
if (i == 0) request.origin = marker.getPosition();
else if (i == locations.length - 1) request.destination = marker.getPosition();
}
//push the waypoints to request.waypoints array
waypoints.forEach(function(v, i) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(v.lat, v.lng),
map: map,
icon: {
url: v.gender == 'Male' ? 'http://www.clker.com/cliparts/0/V/t/A/W/N/google-maps-gris-hi.png' : 'http://www.clker.com/cliparts/n/Z/Y/K/e/e/yellow-google-map-pin-hi.png',
scaledSize: new google.maps.Size(45, 45)
},
data: v
});
google.maps.event.addListener(marker, 'click', (function(marker, infowindow) {
return function() {
infowindow.setContent('<b>Employee Name : </b>' + marker.data.empName + '<br><b>pickupTime : </b>' + marker.data.pickupTime+ '<br><b>Gender : </b>' + marker.data.gender);
infowindow.open(map, marker);
};
})(marker, infowindow));
})
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
google.maps.event.addDomListener(window, "load", initialize);html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7lDrYPDmJz1JsQh2rbWA9uRZHcFk_xJY"></script>
<div id="map"></div>
设置航点时，请检查性别和＆amp;在那边设置图标。
希望这会对你有所帮助。