Javascript 使用ajax刷新google地图标记和信息气泡

我正在使用asp mvc以及jquery和google maps api来显示和更新地图上的位置

我的目标：

使用标记指向多个位置

使用信息气泡提供有关这些位置的少量信息

单击刷新标记和信息气泡

我迄今为止所取得的成就：

我能够加载地图，放置指针并显示信息气泡。经过几个小时的努力，我还成功地在ajax调用时刷新了标记

我的问题：

第一次更新后，标记正确刷新，但信息气泡仍然存在（我不知道如何清除它们）

新气泡将与新标记一起显示，但这些气泡不包含任何数据

第二次更新后，所有标记消失，但所有信息气泡仍保留

初始荷载

呼叫1后（单击租金按钮）

呼叫2后（点击购买按钮）

somePartialView.cshtml

@Html.HiddenFor(m => m.LatLng, new { @id = "latLng" })
<div id="map" class="google-maps">
    <div id="map-canvas"></div>
</div>

@Html.HiddenFor（m=>m.LatLng，new{@id=“LatLng”}）

Javascript

NB:在测试时，我在viewModel中硬编码lat和lng值，因此我知道每次调用时只返回四个值，这就是我将四个字符串硬编码到contentString数组中的原因

$(document).ready(function () {
var map;
var iterator = 0;
var markers = [];
var markerLatLng = [];

var contentString = [
    '<div class="infobox-inner"><a href="08_Properties_Single.html"><img src="assets/img/icon-1.png" alt=""/><span>Sarkkara Villa</span></a></div>',
    '<div class="infobox-inner"><a href="08_Properties_Single.html"><img src="assets/img/icon-2.png" alt=""/><span>Sarkkara Flat</span></div>',
    '<div class="infobox-inner"><a href="08_Properties_Single.html"><img src="assets/img/icon-3.png" alt=""/><span>Sarkkara Commercial</span></div>',
    '<div class="infobox-inner"><a href="08_Properties_Single.html"><img src="assets/img/icon-4.png" alt=""/><span>Sarkkara Appartment</span></a></div>'
];
var latlng = $("#latLng").val();
var aryOfLatLng = latlng.split(';');

loadMarkers(aryOfLatLng);

function loadMarkers(ary) {
    $.each(ary, function (index, value) {
        if (value !== "") {
            var values = value.split(',')
            var loc = new google.maps.LatLng(Number(values[0]), Number(values[1]));
            markerLatLng.push(loc);
        }
    })
}

function initialize() {
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        scrollwheel: false,
        zoom: 12,
        center: new google.maps.LatLng(52.520816, 13.410186) //Berlin
    });
    setTimeout(function () {
        drop();
    }, 1000);

}

// animate markers
function drop() {
    for (var i = 0; i < markerLatLng.length; i++) {
        setTimeout(function () {
            addMarker();
        }, i * 400);
    }
}

function addMarker() {
    var marker = new google.maps.Marker({
        position: markerLatLng[iterator],
        map: map,
        icon: 'assets/img/marker.png',
        draggable: false
        //,animation: google.maps.Animation.DROP
    });
    markers.push(marker);

    var infoBubble = new InfoBubble({
        map: map,
        content: contentString[iterator],
        position: markerLatLng[iterator],
        disableAutoPan: true,
        hideCloseButton: true,
        shadowStyle: 0,
        padding: 0,
        borderRadius: 3,
        borderWidth: 1,
        borderColor: '#74d2b2',
        backgroundColor: '#ffffff',
        backgroundClassName: 'infobox-bg',
        minHeight: 35,
        maxHeight: 230,
        minWidth: 200,
        maxWidth: 300,
        arrowSize: 5,
        arrowPosition: 50,
        arrowStyle: 0
    });

    setTimeout(function () {
        infoBubble.open(map, marker);
    }, 200);

    google.maps.event.addListener(marker, 'click', function () {
        if (!infoBubble.isOpen()) {
            infoBubble.open(map, marker);
        }
        else {
            infoBubble.close(map, marker);
        }
    });

    iterator++;
}

google.maps.event.addDomListener(window, 'load', initialize);

$("#rent").click(function () {
    ajaxRequest("/Map/_IsForSale", false)
})

$("#buy").click(function () {
    ajaxRequest("/Map/_IsForSale", true)
})

function ajaxRequest(targetUrl, data) {
    $.ajax({
        cache: false,
        url: targetUrl,
        type: "POST",
        data: { 'isForSale': data },
        success: function (data) {
            successCallBack(data);
        },
        error: function (request, status, error) {
            alert(error)
        }
    });
}

// Removes the markers from the map, but keeps them in the array. It will hide all markers.
function clearMarkers() {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(null);
    }
}

function successCallBack(data) {
    clearMarkers();
    var latlng = data.substring(data.indexOf("value=") + 7, data.indexOf(";\""));
    var ary = latlng.split(';');
    $.each(ary, function (index, value) {
        if (value !== "") {
            var values = value.split(',')
            var loc = new google.maps.LatLng(Number(values[0]), Number(values[1]));
            markerLatLng.push(loc);
        }
    })
    drop();
}
});

$（文档）.ready（函数（）{
var映射；
var迭代器=0；
var标记=[]；
var markerLatLng=[]；
var contentString=[
'',
''
];
var latlng=$（“#latlng”）.val（）；
var aryOfLatLng=latlng.split（“；”）；
装载标记（aryOfLatLng）；
函数装入标记（ary）{
$.each（元，函数（索引，值）{
如果（值！==“”）{
var values=value.split（'，'）
var loc=new google.maps.LatLng（数字（值[0]），数字（值[1]）；
标记标签推送（loc）；
}
})
}
函数初始化（）{
map=new google.maps.map（document.getElementById（'map-canvas'）{
滚轮：错误，
缩放：12，
中心：新google.maps.LatLng（52.520816,13.410186）//柏林
});
setTimeout（函数（）{
下降（）；
}, 1000);
}
//为标记设置动画
函数drop（）{
对于（变量i=0；i

1.第一次更新后，标记正确刷新，但信息气泡仍然存在（我不知道如何清除它们）

就像你如何创建一个

标记

数组来存储你创建的标记，以便以后用你的

#clearMarkers

清除一样。我会对InfoBubble做类似的操作，例如

#clearInfoBubbles

。制作一个

infoBubbles

数组来存储信息bubble。根据InfoBubble repo中的源代码，你可以关闭一个I用

InfoBubble>关闭
“fo bubble”。必要时，请致电
#clearInfoBubbles
。在
#successCallBack
中

2.新气泡与新标记一起显示，但这些气泡不包含任何数据

您正在像这样创建
infoBubble

var infoBubble = new InfoBubble({
  map: map,
  content: contentString[iterator],
  ...
});

使用
contentString
，该字符串仅硬编码为4个元素长

当
#initialize
完成时，
迭代器将等于4。随后调用
#addMarker