如何更改谷歌地图中的标记图像 [英] how to change marker image in a google map
本文介绍了如何更改谷歌地图中的标记图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在地图上显示20个标记，我需要用一个图标显示10个标记，其他10个标记要显示在其他图标中。
标记myLatLng到myLatLng9应该有相似的标记，标记myLatLngb到myLatLngb9应该有相同的标记。你能帮助我改变什么，这样我就可以区分2个标记并标记
标记 - myLatLng为myLatLng9为A，myLatLngb为myLatLngb9为B。
i'm showing 20 markers in the map from that i need to show 10 markers with one icon and other 10 markers want to show in other icon. markers myLatLng to myLatLng9 should have similar marker and markers myLatLngb to myLatLngb9 should have same marker. can u help me what to change so that i can differentiate the 2 markers and label also markers - myLatLng to myLatLng9 as A and myLatLngb to myLatLngb9 as B.
js fiddle - https://jsfiddle.net/9yq8y1p2/4/
code
js fiddle - https://jsfiddle.net/9yq8y1p2/4/ code
<script>
function initMap() {
var labels = '0123456789';
var labelIndex = 0;
// @Model.AssetTrackers[0].deviceid
@: var myLatLng = { lat: @Model.AssetTrackers[0].latitude[0],lng: @Model.AssetTrackers[0].longitude[0],deviceId:'@Model.AssetTrackers[0].deviceid'};
//.......
@: var myLatLng9 = { lat: @Model.AssetTrackers[0].latitude[9],lng: @Model.AssetTrackers[0].longitude[9],deviceId: '@Model.AssetTrackers[0].deviceid' };
//tracker 2
@: var myLatLngb = { lat: @Model.AssetTrackers[1].latitude[0],lng: @Model.AssetTrackers[1].longitude[0],deviceId:'@Model.AssetTrackers[1].deviceid'};
//......
@: var myLatLngb9 = { lat: @Model.AssetTrackers[1].latitude[9],lng: @Model.AssetTrackers[1].longitude[9],deviceId: '@Model.AssetTrackers[1].deviceid' };
var citymap = {
abc: {
center: { lat: 17.446507, lng: 78.383033 },
}
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: myLatLng,
});
var image = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
var drawingManager = new google.maps.drawing.DrawingManager({
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['polyline']
},
markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
var pathBetween = new google.maps.Polyline({
path: [myLatLng,myLatLng1,myLatLng2,myLatLng3,myLatLng4,myLatLng5,myLatLng6,myLatLng7,myLatLng8,myLatLng9],
strokeColor: '#8D6E63',
strokeOpacity: 1.0,
strokeWeight: 2
});
// second tracker path
var pathbetweenb = new google.maps.Polyline({
path: [myLatLngb, myLatLngb1, myLatLngb2, myLatLngb3, myLatLngb4, myLatLngb5, myLatLngb6, myLatLngb7, myLatLngb8, myLatLngb9],
strokecolor: '#8D6E63',
strokeopacity: 1.0,
strokeweight: 2
});
pathBetween.setMap(map);
pathbetweenb.setMap(map);
var path = JSON.parse('[@(Html.Raw(ViewBag.PolyLine))]');
var pathBetween1 = new google.maps.Polyline({
path: path,
strokeColor: '#3C8DBC',
strokeOpacity: 1.0,
strokeWeight: 2
});
pathBetween1.setMap(map);
var polylines = [];
google.maps.event.addListener(drawingManager, 'polylinecomplete', function(polyline) {
polylines.push(polyline);
var polylinePath = polyline.getPath();
console.log(polylinePath.getArray().toString());
var polyarray = [];
for (var i = 0; i < polylinePath.getArray().length; i++) {
polyarray.push('{"lat":'+polylinePath.getArray()[i].lat() + ', "lng":' + polylinePath.getArray()[i].lng() + '}');
}
drawingManager.setDrawingMode(null);
});
var deviceIds = [];
function addMarker(markerSettings) {
if (!insidePolygon(markerSettings)) {
deviceIds.push(markerSettings.deviceId);
var deviceId = $.grep(deviceIds, function( a ) {
return a === markerSettings.deviceId;
})
if(deviceId.length == 1){
});
}
var marker = new google.maps.Marker({
position: markerSettings,
map: map,
title: '@Model.AssetTrackers[0].deviceid',
label:"A"+ labels[labelIndex++ % labels.length],
icon : "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"
});
}
else{
var marker = new google.maps.Marker({
position: markerSettings,
map: map,
title: '@Model.AssetTrackers[0].deviceid',
label:"A"+ labels[labelIndex++ % labels.length]
});
}
}
addMarker(myLatLng);
addMarker(myLatLng1);
addMarker(myLatLng2);
addMarker(myLatLng3);
addMarker(myLatLng4);
addMarker(myLatLng5);
addMarker(myLatLng6);
addMarker(myLatLng7);
addMarker(myLatLng8);
addMarker(myLatLng9);
//second
addMarker(myLatLngb);
addMarker(myLatLngb1);
addMarker(myLatLngb2);
addMarker(myLatLngb3);
addMarker(myLatLngb4);
addMarker(myLatLngb5);
addMarker(myLatLngb6);
addMarker(myLatLngb7);
addMarker(myLatLngb8);
addMarker(myLatLngb9);
}
</script>
推荐答案
修改您的addMarker函数并将参数传递给图标路径。希望它有帮助！
Modify your addMarker function and pass icon path an argument. Hope it helps!
function addMarker(markerSettings,iconImg)
{
var marker = new google.maps.Marker({
position: markerSettings,
map: map,
title: '@Model.AssetTrackers[0].deviceid',
label: "A" + labels[labelIndex++ % labels.length],
//Pass IconImg here
icon: iconImg
});
}
var icon1='http://maps.google.com/mapfiles/ms/icons/green.png';
var icon2='http://maps.google.com/mapfiles/ms/icons/blue.png';
addMarker(myLatLng,icon1);
addMarker(myLatLng1,icon1);
addMarker(myLatLng2,icon1);
addMarker(myLatLng3,icon1);
addMarker(myLatLng4,icon1);
addMarker(myLatLng5,icon1);
addMarker(myLatLng6,icon1);
addMarker(myLatLng7,icon1);
addMarker(myLatLng8,icon1);
addMarker(myLatLng9,icon1);
//second tracker
addMarker(myLatLngb,icon2);
addMarker(myLatLngb1,icon2);
addMarker(myLatLngb2,icon2);
addMarker(myLatLngb3,icon2);
addMarker(myLatLngb4,icon2);
addMarker(myLatLngb5,icon2);
addMarker(myLatLngb6,icon2);
addMarker(myLatLngb7,icon2);
addMarker(myLatLngb8,icon2);
addMarker(myLatLngb9,icon2);
这篇关于如何更改谷歌地图中的标记图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
