【发布时间】：2018-02-24 10:29:26
【问题描述】：
我正在使用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>我的更新问题
从这里我点击绿色图标表示显示开始，点击红色图标表示显示从这里开始，而不是这个我想显示地址，你能更新你的答案吗-
【问题讨论】：
-
设置图标时，就像使用 start 和 end 一样，只需引用不同的图标 url
标签： javascript jquery google-maps google-maps-api-3