使用ajax刷新谷歌地图标记和infoBubbles

Question

我使用asp mvc以及jQuery和谷歌地图api来显示和更新地图上的位置。

我的目标：

1. 使用标记指向一些地点

2. 使用信息的位置，提供的信息量小气泡info bubble repo

3. 的OnClick刷新标记和信息气泡

我迄今取得什么：

我能够加载地图，将指针和显示信息气泡。经过几个小时的挣扎之后，我还设法在ajax调用时刷新标记。

我的问题：

1. 第一个更新的标记正确刷新之后，但在信息气泡残留（我不能工作，如何清除它们）一起显示

2. 新的泡沫新的标记，但这些气泡不包含任何数据

3. 第二次更新后所有标记消失，但所有信息泡沫仍然

初始负载

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

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

somePartialView.cshtml

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

的Javascript

NB：测试时，我很难在视图模型编码的纬度和经度值，所以我知道每个一次通话只会返回四个值，这就是为什么我有四个硬编码进入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(); 
} 
}); 

Answer 1

1。第一次更新后的标记正确刷新，但气泡保持信息（我不能工作，如何清除它们）

就像你如何创建一个markers阵列来存储您所创建的标记以后你#clearMarkers清楚。我会为infoBubbles做类似的事情，例如#clearInfoBubbles。制作一个infoBubbles数组来存储信息气泡。根据信息泡泡回购中的源代码(see line 968)，您可以用InfoBubble#close关闭信息泡泡。必要时致电#clearInfoBubbles。也许你的#successCallBack。

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

你正在创建infoBubble这里这样

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

与contentString，这是唯一的硬编码为4个元素长。

的时候#initialize结束后，iterator将等于4. #addMarker（点击一号租金按钮时）的后续调用将尝试与contentString[4]建立资讯泡沫，然而，这是undefined。 iterator永远不会重置为0

3.第二次更新所有标记消失后，但所有信息气泡残留

所有信息气泡残留，因为他们从来没有关闭。

我不确定您的“购买”请求是否会回馈给您。我会检查一下，看到响应正在返回您所期望的数据。我的猜测是，现在没有新的标记正在创建。