如何更改谷歌地图标记颜色
[英]How to change google map marker color
问题描述
这里是一个沉思的谷歌地图API，从这里有一个数组（位置），从这个数组我有经度和纬度值，基于这个值我正在创建路线，现在我想做的意思是凝视点标记我想以绿色显示，当前指示位置和结束位置均显示为红色。
var res = { "loginType": "logout", "status": "success", "count": 1, "absentCount": 2, "startingLat": "12.9817121", "startingLng": "77.72649609999996", "companyLat": "12.9563031", "companyLng": "77.6949695", "data": [{ "empName": "Trisha", "pickupTime": "07:45 AM", "cabName": "Atios", "pickupLatitude": "12.956604", "pickupLongitude": "77.696480", }, { "empName": "Divya", "pickupTime": "08:45 AM", "cabName": "Atios", "pickupLatitude": "12.956230", "pickupLongitude": "77.694997", }, { "empName": "Divya", "pickupTime": "08:45 AM", "cabName": "Atios", "pickupLatitude": "12.956230", "pickupLongitude": "77.694997", } ], "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 ? 'End' : i, o.Travlinglatitude, o.Travlinglongitude, i + 1 ] }); var waypoints = res.data.map(function(o) { return { empName: o.empName, pickupTime: o.pickupTime, lat: o.pickupLatitude, lng: o.pickupLongitude } }); 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] }); } 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); 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>
我的更新代码
<form id="formmapping">
<select name="tripId">
<option value="gMAcX">gMAcX</option>
<option value="nQjXB">nQjXB</option>
</select>
<button type="submit" class="btn btn-info pull-right" id="btnsubmit">Submit</button>
</form>
<script type="text/javascript">
$('#btnsubmit').click(function(e){
e.preventDefault();
$.ajax({
type:'POST',
url :"getLatLan.php",
data : $('form#formmapping').serialize(),
success: function(data) {
/*if(res['status']=='success'){
}*/
var res = {
"loginType": "logout",
"status": "success",
"count": 1,
"absentCount": 2,
"startingLat": "12.9817121",
"startingLng": "77.72649609999996",
"companyLat": "12.9563031",
"companyLng": "77.6949695",
"data": [{
"empName": "Trisha",
"pickupTime": "07:45 AM",
"cabName": "Atios",
"pickupLatitude": "12.956604",
"pickupLongitude": "77.696480",
},
{
"empName": "Divya",
"pickupTime": "08:45 AM",
"cabName": "Atios",
"pickupLatitude": "12.956230",
"pickupLongitude": "77.694997",
},
{
"empName": "Divya",
"pickupTime": "08:45 AM",
"cabName": "Atios",
"pickupLatitude": "12.956230",
"pickupLongitude": "77.694997",
}
],
"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 ? 'End' : i,
o.Travlinglatitude,
o.Travlinglongitude,
i + 1
]
});
var waypoints = res.data.map(function(o) {
return {
empName: o.empName,
pickupTime: o.pickupTime,
lat: o.pickupLatitude,
lng: o.pickupLongitude
}
});
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] ==“开始”？ http://www.myiconfinder.com/uploads/iconsets/256-256-8055c322ae4049897caa15e5331940f2.png '：' http://www.myiconfinder.com/uploads/iconsets/256-256-76f453c62108782f0cad9bfc2da1ae9d.png ”，scaledSize：位置[I] [0] == '开始'？ 新的google.maps.Size（40、40）：新的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);
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);
}
});
});
</script>
2 个解决方案
解决方案1
1 2017-09-07 11:44:41
您可以在初始化标记时设置图标：
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
i: locations[i][0],
icon: i == 0 ? 'http://maps.google.com/mapfiles/ms/icons/green-dot.png' : 'someothericon.png'
});
其他图标：
http://maps.google.com/mapfiles/ms/icons/blue-dot.png http://maps.google.com/mapfiles/ms/icons/yellow-dot.png http://maps.google。 com / mapfiles / ms / icons / red-dot.png http://maps.google.com/mapfiles/ms/icons/orange-dot.png http://maps.google.com/mapfiles/ms/icons/紫dot.png
当然您也可以制作自己的图标
解决方案2
0 2017-09-07 11:57:02
var res = { "loginType": "logout", "status": "success", "count": 1, "absentCount": 2, "startingLat": "12.9817121", "startingLng": "77.72649609999996", "companyLat": "12.9563031", "companyLng": "77.6949695", "data": [{ "empName": "Trisha", "pickupTime": "07:45 AM", "cabName": "Atios", "pickupLatitude": "12.956604", "pickupLongitude": "77.696480", }, { "empName": "Divya", "pickupTime": "08:45 AM", "cabName": "Atios", "pickupLatitude": "12.956230", "pickupLongitude": "77.694997", }, { "empName": "Divya", "pickupTime": "08:45 AM", "cabName": "Atios", "pickupLatitude": "12.956230", "pickupLongitude": "77.694997", } ], "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 ? 'End' : i, o.Travlinglatitude, o.Travlinglongitude, i + 1 ] }); var waypoints = res.data.map(function(o) { return { empName: o.empName, pickupTime: o.pickupTime, lat: o.pickupLatitude, lng: o.pickupLongitude } }); 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); 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>
如何在 google map api v3 中更改每种类型的地图标记颜色
[英]how to change map marker color for each type in google map api v3
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.