簡體   English   中英

谷歌地圖:添加硬編碼標記到循環

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM