2016-03-08 66 views
-1

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

    } 
} 
+0

JavaScript是大小寫敏感的'lmap'是不一樣的' lMap'。 – geocodezip

+0

感謝您指出這一點@geocodezip – Carlo

回答

1

循環後似乎是一個正確的地方

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

這工作與lmap更改爲lMap一個小錯誤 – Carlo