2011-12-29 3 views
1

Я пытаюсь сделать карту Google, которая будет показывать несколько маркеров в разных местах. Эта карта связана с базой данных, где хранится широта и долгота. Я хочу сделать эту карту так, чтобы я мог изменять широту и долготу в базе данных, чтобы маркеры могли обновлять и перемещать их в новое место. Но я не хочу, чтобы вся карта перезагружалась, просто данные. Вот код, и спасибо за вашу помощь!Как обновить подсказки карты 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)

ответ

0

первая функция делают называется 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); 
    } 
} 
); 
} 
} 
+0

Благодарим вас за помощь, но я до сих пор не понимаю, как перенести маркеры на карту google. Для этой карты местоположение вытаскивается непосредственно из базы данных, и эту информацию можно изменить. Итак, как я могу сделать так, чтобы маркеры для google-карты также менялись при изменении информации в базе данных? – user1121774

+0

, когда местоположение маркера изменилось в db, вы должны запустить функцию loadmarker js для перезагрузки маркеров. – halil

+0

добавленный код. вы можете проверить? – halil

0

Вам следует переключиться на API Карт Google v3, где указатели привязаны к карте, а не наоборот. Кроме того, вы получите кучу интересных новых функций бесплатно!

Смежные вопросы