Google Maps:添加硬编码标记以循环

卡洛

我正在使用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));

  }
} 
scaisEdge

循环后似乎是正确的地方

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!'
});  

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Google Maps异步添加标记

来自分类Dev

Google Maps异步添加标记

来自分类Dev

在for循环中创建Google Maps标记

来自分类Dev

Android Google Maps异步任务添加标记

来自分类Dev

在Angular-Google-Maps中添加标记

来自分类Dev

Google Maps使用jquery从ajax添加标记

来自分类Dev

在div点击添加Google Maps标记

来自分类Dev

无法在循环中添加Google标记

来自分类Dev

在google-maps-react的Google Maps的标记下添加标记标签

来自分类Dev

Google Maps刷新标记

来自分类Dev

Google Maps标记动作

来自分类Dev

筛选标记Google Maps

来自分类Dev

Google Maps:如何更改“标记”默认红色并添加标签

来自分类Dev

Android Google Maps,如何在标记中添加链接

来自分类Dev

在Google Maps v2 Android上添加标记

来自分类Dev

Google Maps API:设置用于添加标记/折线的回调

来自分类Dev

如何在Google Maps API上的标记周围添加圆圈

来自分类Dev

Google Interactive Maps从数据库值添加标记

来自分类Dev

Google Maps InfoWindow为多个标记添加分页

来自分类Dev

在标记Google Maps v3上添加onclick事件

来自分类Dev

如何在Google Maps API上的标记周围添加圆圈

来自分类Dev

Google Maps:如何更改“标记”默认红色并添加标签

来自分类Dev

添加标记时的离子angularjs-google-maps TypeError

来自分类Dev

使用Javascript API的多个邮政编码根据标记提供的Google Maps位置

来自分类Dev

IllegalStateException Java Google Maps标记

来自分类Dev

Google Maps标记随机消失

来自分类Dev

Google Maps API标记刷新

来自分类Dev

群组标记-Google Maps API

来自分类Dev

Google Maps API:如何放大和设置for循环中多个标记的不同中心?

Related 相关文章

热门标签

归档