我正在使用Google Maps api(v3)和jQuery显示几批标记。
我的工作几乎与我想要的一样,但我需要逐个删除标记,而不是一次性删除。
我在Google地图文档中找到this example,但我无法弄清楚如何将其与我的脚本集成。
请有人帮助我吗?
到目前为止,这是我的代码:
$(document).ready(function () {
$("#map").css({
height: 600,
width: 958
});
var jeLatLng = new google.maps.LatLng(17.74033553, 83.25067267);
jeMap.init('#map', jeLatLng, 11);
$("#showmarkers").click(function (e) {
jeMap.placeMarkers('markers.xml');
});
$("#showmarkers2").click(function (e) {
jeMap.placeMarkers('markers2.xml');
});
});
var jeMap = {
map: null
}
var UK = new google.maps.LatLng(21.192481, 0.0);
jeMap.init = function (selector, latLng, zoom) {
var myOptions = {
zoom: 2,
center: UK,
mapTypeId: google.maps.MapTypeId.HYBRID,
streetViewControl: false,
mapTypeControl: false,
backgroundColor: '#111'
}
this.map = new google.maps.Map($(selector)[0], myOptions);
}
var infoWindow = new google.maps.InfoWindow();
jeMap.placeMarkers = function (filename) {
$.get(filename, function (xml) {
$(xml).find("marker").each(function () {
var name = $(this).find('name').text();
var address = $(this).find('address').text();
// create a new LatLng point for the marker
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
var marker = new google.maps.Marker({
map: jeMap.map,
position: point,
animation: google.maps.Animation.DROP,
icon: 'marker_pink.png'
});
var html = '<strong>' + name + '</strong.><br />' + address;
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(jeMap.map, marker);
});
});
});
}
我理解我需要以某种方式修改jeMap.placeMarkers函数,以便它在每个循环之间循环通过每个标记,只是无法弄清楚如何。
答案 0 :(得分:4)
这个怎么样:
jeMap.placeMarkers = function (filename) {
//setup counter variable
var counter = 0;
$.get(filename, function (xml) {
$(xml).find("marker").each(function () {
var name = $(this).find('name').text();
var address = $(this).find('address').text();
// create a new LatLng point for the marker
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
//set timeout based on maps example
setTimeout(function() {
addMarker(point, address, name);
}, counter * 200);
//increment counter
counter++;
});
});
}
//add marker with specific point.
function addMarker(point, address, name){
var marker = new google.maps.Marker({
map: jeMap.map,
position: point,
animation: google.maps.Animation.DROP,
icon: 'marker_pink.png'
});
var html = '<strong>' + name + '</strong.><br />' + address;
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(jeMap.map, marker);
});
}