[英]Google Maps: add hardcoded Marker to loop
我正在使用 jquery/Javascript 遍歷標記及其存儲在數據庫中的信息。 但是,除了這些標記之外,我還希望在地圖上有一個默認標記,因為這個標記非常不同(列更少),所以我不確定如何擴展現有邏輯以包括硬編碼標記。 基本上,附加標記應該是這樣的(到目前為止還沒有工作,標記沒有出現):
附加標記:
var myLatLng = {lat: -25.363, lng: 131.044};
var additionalmarker = new google.maps.Marker({
position: myLatLng,
map: lmap,
title: 'Additional Marker!'
});
完整代碼(無附加標記):
itstar.apex.plugins.googleMap.displayMap = function(pItemID, pParameter) {
var lParameter = apex.jQuery.extend({
map_width: 640,
map_height: 480,
map_zoom: 12,
map_id: pItemID + "_MAP",
map_locations: "",
marker_icon: "",
map_type: "ROAD"
}, pParameter);
if (!lParameter.map_locations) {
return;
}
/* Convert the JSON String into an Object */
var oLocations = JSON.parse(lParameter.map_locations);
/* Check the all parameters to get the options for the map */
/* 1. the JSON String must contain the 2 objects "base" and "marker" */
if (Object.keys(oLocations.gps).length != 2) {
alert("GPS-JSON Object not valid ");
return;
}
/* 2. get the base coordinates to center the map to the point given in the parameter lParameter.base_location */
var lBaseLat = oLocations.gps[0].base[0].lat;
var lBaseLng = oLocations.gps[0].base[0].lng;
var lBaseLatLng = new google.maps.LatLng(lBaseLat, lBaseLng);
/* 3. if there is an individuell zoom factor within the JSON string, use it */
var lZoom = oLocations.gps[0].base[0].zoom;
/* if not, use the zoom parameter */
if (!lZoom) {
lZoom = lParameter.map_zoom;
}
/* 4. check for individuell map type */
var lMapType = oLocations.gps[0].base[0].type;
if (!lMapType) {
lMapType = lParameter.map_type;
}
switch (lMapType) {
case "ROAD":
var cMapType = google.maps.MapTypeId.ROADMAP;
break;
case "HYBRID":
var cMapType = google.maps.MapTypeId.HYBRID;
break;
case "SATELLITE":
var cMapType = google.maps.MapTypeId.SATELLITE;
break;
case "TERRAIN":
var cMapType = google.maps.MapTypeId.TERRAIN;
break;
default:
var cMapType = google.maps.MapTypeId.ROADMAP;
break;
}
/* Display the map */
var lMapOptions = {
zoom: lZoom,
/* center: lBaseLatLng,*/
mapTypeId: cMapType
}
var lMap = new google.maps.Map(
document.getElementById(lParameter.map_id),
lMapOptions
);
lMap.setCenter(new google.maps.LatLng(38.850033, -95.6500523));
/* put the markers */
var lMarkerCount = Object.keys(oLocations.gps[1].marker).length;
var infowindow = new google.maps.InfoWindow();
for (var i=0; i<lMarkerCount; i++) {
var oMarkerLocation = oLocations.gps[1].marker[i];
var lLat = oMarkerLocation.lat;
var lLng = oMarkerLocation.lng;
/* new Marker Position */
var lMarker = new google.maps.Marker({
position: new google.maps.LatLng(lLat, lLng),
animation: google.maps.Animation.DROP,
map: lMap
});
/* check custom Marker Image in GPS Data*/
var lGpsImg = oMarkerLocation.img;
var lParImg = lParameter.marker_icon;
if (lGpsImg && lGpsImg.length != 0) {
var lMarkerImage = new google.maps.MarkerImage(lGpsImg);
}
else {
/* no custom image in GPS data but maybe in the parameters? */
if (lParImg && lParImg.length != 0) {
var lMarkerImage = new google.maps.MarkerImage(lParImg);
} else {
lMarkerImage = "";
}
}
if (lMarkerImage && lMarkerImage.length != 0) {
lMarker.setIcon(lMarkerImage);
}
google.maps.event.addListener(lMarker, 'click', (function(lMarker, i) {
return function() {
infowindow.setContent(oLocations.gps[1].marker[i].name);
infowindow.open(lMap, lMarker);
}
})(lMarker, i));
}
}
在循環之后似乎是正確的地方
for (var i=0; i<lMarkerCount; i++) {
var oMarkerLocation = oLocations.gps[1].marker[i];
var lLat = oMarkerLocation.lat;
var lLng = oMarkerLocation.lng;
/* new Marker Position */
var lMarker = new google.maps.Marker({
position: new google.maps.LatLng(lLat, lLng),
animation: google.maps.Animation.DROP,
map: lMap
});
/* check custom Marker Image in GPS Data*/
var lGpsImg = oMarkerLocation.img;
var lParImg = lParameter.marker_icon;
if (lGpsImg && lGpsImg.length != 0) {
var lMarkerImage = new google.maps.MarkerImage(lGpsImg);
}
else {
/* no custom image in GPS data but maybe in the parameters? */
if (lParImg && lParImg.length != 0) {
var lMarkerImage = new google.maps.MarkerImage(lParImg);
} else {
lMarkerImage = "";
}
}
if (lMarkerImage && lMarkerImage.length != 0) {
lMarker.setIcon(lMarkerImage);
}
google.maps.event.addListener(lMarker, 'click', (function(lMarker, i) {
return function() {
infowindow.setContent(oLocations.gps[1].marker[i].name);
infowindow.open(lMap, lMarker);
}
})(lMarker, i));
}
var myLatLng = {lat: -25.363, lng: 131.044};
var additionalmarker = new google.maps.Marker({
position: myLatLng,
map: lmap,
title: 'Additional Marker!'
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.