Google Maps API v3会从XML拖放标记吗？ [英] Google Maps API v3 drop markers from XML with delay?

问题描述

我正在使用Google Maps api（v3）和jQuery显示几批标记。

我的工作方式几乎与我想要的完全一样但我需要一次性删除标记，而不是一次全部删除标记。

我找到这个例子在谷歌地图文档上，但我无法工作如何将其与我的脚本整合。

有人能帮我吗？

这是我的代码远：

  $（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 （）; 
 var name = $（this）.find（'name'）。text 
 
 //为标记创建一个新的LatLng点
 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（标记，'点击'，功能on（）{
 infoWindow.setContent（html）; 
 infoWindow.open（jeMap.map，marker）; 
}）; 
}）; 
}）; 
} 
  

我知道我需要以某种方式修改jeMap.placeMarkers函数，每个循环之间有一个延迟的标记，只是无法弄清楚。

解决方案

这个怎么样：

  jeMap.placeMarkers =函数（文件名）{
 //设置计数器变量
 var counter = 0; 
 $ .get（filename，function（xml）{
 $（xml）.find（marker）。each（function（）{
 var name = $（this）.find （'name'）。text（）; 
 var address = $（this）.find（'address'）。text（）; 
 
 //为此创建一个新的LatLng点标记
 var lat = $（this）.find（'lat'）。text（）; 
 var lng = $（this）.find（'lng'）。text（）; $ b $ （var）= new google.maps.LatLng（parseFloat（lat），parseFloat（lng））; 
 
 //设置基于地图的超时示例
 setTimeout（function（）{
 addMarker（point，address，name）; 
}，counter * 200）; 
 
 //递增计数器
计数器++; 
}）; 
}）; 
} 
 
 //添加特定点的标记。 
函数addMarker（point，address，name）{
 var marker = new google.maps.Marker（{$ b $ map：jeMap.map，
 position：point，
动画：google.maps.Animation.DROP，
图标：'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）; 
}）; 
} 
  

I'm working on displaying several batches of markers using the Google Maps api (v3) and jQuery.

I've got it working almost exactly as I want it but I would need to drop the markers one by one instead of all at once.

I've found this example on the Google maps documentation but I can't work out how to integrate it with my script.

Would someone please be able help me?

Here's my code so far:

$(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);
            });
        });
    });
}

I understand I need to somehow modify the jeMap.placeMarkers function so it loops through each marker with a delay between each cycle, just can't figure out how.

解决方案

How about this:

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);
    });
}

这篇关于Google Maps API v3会从XML拖放标记吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！