如何更新谷歌地图大头针而不刷新整个地图
How to update google map pins without refreshing the whole map?
我一直在尝试制作一个谷歌地图,它会在不同的位置显示多个标记。该地图连接到存储经纬度的数据库。我想制作这个地图,这样我就可以更改数据库中的纬度和经度,这样标记就可以更新并重新定位到新的位置。但我不想重载整个地图,只重载数据。这里是代码,并感谢您的帮助!
<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密钥)
第一个make函数叫做load_marker
将启动gdownloadurl的代码放在new function中,并在数据更改时通过调用此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);
}
}
);
}
}
您应该切换到Google Maps API v3,其中指针链接到地图,而不是相反。另外,你还可以免费获得一堆有趣的新功能!
相关文章:
- 嵌入的自定义谷歌地图不会在没有刷新的情况下显示
- 谷歌地图Api v3-在Domready之后刷新Markerclusterer
- 在Jquery多步骤表单中刷新谷歌地图
- 将标记添加到现有的谷歌地图(不刷新谷歌地图)
- 谷歌地图没有在标签2中和标签3中正确加载.如何创建刷新选项卡
- 信息窗口未刷新:AngularJS和谷歌地图
- 如何刷新Bing地图AJAX
- 在不刷新的情况下跟踪某个正方形中的地图标记
- 刷新谷歌地图信息窗口中的内容
- 传单地图需要刷新页面才能显示在 Jquery 移动应用程序中
- 刷新后,OpenLayers 弹出窗口在地图上仍然可见
- 我的实时地图不会自动刷新
- 在 AngularJS 中刷新地图
- 刷新传单地图:地图容器已初始化
- 谷歌地图仅在“刷新”后加载
- 谷歌地图 API 在刷新 JQM 之前不会加载
- 谷歌地图 API V3 在多次页面刷新时加载
- 谷歌地图在刷新页面后显示为灰色
- 如何在不刷新地图的情况下更新gmaps中的标记
- Decarta-如何刷新地图