如何更新谷歌地圖引腳而無需刷新整個地圖？

我一直在試圖製作一個Google地圖，它會在不同的位置顯示多個標記。該地圖連接到存儲經度和緯度的數據庫。我想製作這張地圖，以便我可以更改數據庫中的經度和緯度，以便標記可以更新並重新定位到新位置。但我不希望整個地圖重新加載，只是數據。這裏是代碼，並感謝您的幫助！如何更新谷歌地圖引腳而無需刷新整個地圖？

<script type="text/javascript"> 
//<![CDATA[ 

var iconBlue = new GIcon(); 
iconBlue.image = 'mm_20_blue.png'; 
iconBlue.shadow = 'mm_20_shadow.png'; 
iconBlue.iconSize = new GSize(16, 25); 
iconBlue.shadowSize = new GSize(27.5, 25); 
iconBlue.iconAnchor = new GPoint(7.5, 25); 
iconBlue.infoWindowAnchor = new GPoint(5, 1); 

var iconRed = new GIcon(); 
iconRed.image = 'mm_20_red.png'; 
iconRed.shadow = 'mm_20_shadow.png'; 
iconRed.iconSize = new GSize(16, 25); 
iconRed.shadowSize = new GSize(27.5, 25); 
iconRed.iconAnchor = new GPoint(7.5, 25); 
iconRed.infoWindowAnchor = new GPoint(5, 1); 

var customIcons = []; 
customIcons["1"] = iconBlue; 
customIcons["2"] = iconRed; 

function load() { 
    if (GBrowserIsCompatible()) { 
    var map = new GMap2(document.getElementById("map")); 
    map.setUIToDefault(); 
    map.addControl(new GMapTypeControl()); 
    map.setCenter(new GLatLng(34.081187, -83.980721), 8); 
    geocoder = new GClientGeocoder(); 


    GDownloadUrl("genxml2.php", function(data) { 
     var xml = GXml.parse(data); 
     var markers = xml.documentElement.getElementsByTagName("marker"); 
     for (var i = 0; i < markers.length; i++) { 
     var Names = markers[i].getAttribute("Names"); 
     var phoneNum = markers[i].getAttribute("phoneNum"); 
     var gender = markers[i].getAttribute("gender"); 
     var homeAd = markers[i].getAttribute("homeAd"); 
     var lat = markers[i].getAttribute("latitudeE6") 
     var lng = markers[i].getAttribute("longitudeE6") 
     var point = new GLatLng(parseFloat(markers[i].getAttribute("latitudeE6")), 
           parseFloat(markers[i].getAttribute("longitudeE6"))); 
     var marker = createMarker(point, Names, phoneNum, gender, homeAd, lat, lng); 
     map.addOverlay(marker); 
     } 
    } 
    ); 
    } 
} 

function createMarker(point, Names, phoneNum, gender, homeAd, lat, lng) { 
    var marker = new GMarker(point, customIcons[gender]); 
    place = marker 

    var html = "<b>Name: " + Names + "</b> <br/>Phone #: " + phoneNum + "</b> <br/>Home Address: " + homeAd + "</b> <br/>Current Address: " + place.address 
    + "</b> <br/>Latitude: " + lat + "</b> <br/>Longitude: " + lng; 
    GEvent.addListener(marker, 'click', function() { 
    marker.openInfoWindowHtml(html); 
    }); 
    return marker; 
}; 

//]]>

（代碼的某些部分被排除在外，就像MD5鍵）

來源

2011-12-29 user1121774

先通函數調用load_marker

把你的代碼，在開始的GDownloadUrl通過調用此javascript函數更改數據時新函數和加載標記。您可能需要先清除所有標記。

您也可能想要在地圖事件中重新加載標記。有兩個有用的事件可以使用。

drag_end和zoom_changed。你可以通過gmap.registerEvent函數註冊這些函數

編輯：添加代碼示例/你的代碼應該是這樣的。

function load() { 
if (GBrowserIsCompatible()) { 
var map = new GMap2(document.getElementById("map")); 
map.setUIToDefault(); 
map.addControl(new GMapTypeControl()); 
map.setCenter(new GLatLng(34.081187, -83.980721), 8); 
geocoder = new GClientGeocoder(); 
} 

function load_markers() { 
/*clear all*/ 
map.clearOverlays(); 

GDownloadUrl("genxml2.php", function(data) { 
    var xml = GXml.parse(data); 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
    var Names = markers[i].getAttribute("Names"); 
    var phoneNum = markers[i].getAttribute("phoneNum"); 
    var gender = markers[i].getAttribute("gender"); 
    var homeAd = markers[i].getAttribute("homeAd"); 
    var lat = markers[i].getAttribute("latitudeE6") 
    var lng = markers[i].getAttribute("longitudeE6") 
    var point = new GLatLng(parseFloat(markers[i].getAttribute("latitudeE6")), 
          parseFloat(markers[i].getAttribute("longitudeE6"))); 
    var marker = createMarker(point, Names, phoneNum, gender, homeAd, lat, lng); 
    map.addOverlay(marker); 
    } 
} 
); 
} 
}

來源

2011-12-29 20:52:24 halil

感謝您的幫助，但我仍然沒有得到如何重新定位谷歌地圖的標記。對於這張地圖，該位置直接從數據庫中提取，並且可以更改此信息。那麼，我如何做到這一點，以便谷歌地圖的標記也會隨着我更改數據庫上的信息而發生變化？ – user1121774 2011-12-29 21:42:32

當標記位置在db中改變時，你應該觸發loadmarker js函數來重新加載標記。 – halil 2011-12-30 05:15:17

添加代碼。你可以檢查一下嗎？ – halil 2011-12-30 11:50:11

您應該切換到Google Maps API v3，其中指針鏈接到地圖而不是相反。另外，您還可以免費獲得一些有趣的新功能！

來源

2011-12-30 14:42:22 alcfeoh

如何更新谷歌地圖引腳而無需刷新整個地圖？

回答

相關問題