谷歌地图使用AJAX添加标记
Google Maps Adding Markers with AJAX
所以我已经读过很多关于闭包问题的文章,我假设这就是它,但我不确定如何解决它。
问题:基本上,我只得到 1 个标记,我假设这是因为我使用相同的"标记"变量?但我不确定,也没有看到一个简单的解决方案来修复它。我确信有一些显而易见的事情,我希望得到真正了解Javascript的人的帮助,而不是我只是搞砸它,直到我得到我需要的结果。
谢谢!
<script>
var geocoder;
var map;
var markersArray = [];
var plocation = [];
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(39.50, -98.35);
var myOptions = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
//Delete Existing Markers
clearOverlays();
deleteOverlays();
//Geocode and Add the New One + Results.
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
//add the center marker
var patientslocation =results[0].geometry.location;
addMarker(patientslocation, "Patient");
//Zoom in on the Region.
map.setZoom(10);
//Call to Our API
$.getJSON("map/search", { provider_type: "01", loc: '"'+patientslocation+'"' },function(data) {
//Parse Results
var htmlstring = "";
var arraylength = data.length-1;
console.log("Result Count (base 0): "+arraylength)
$(data).each(function(i,val){
//Build HTML String for Side Bar
if (val.name){
htmlstring = htmlstring + "<h3>"+val.name+"</h3>";
}
if (val.address){
htmlstring = htmlstring + val.address +"<br/>";
}
if (val.phone){
htmlstring = htmlstring +val.phone +"<br/>";
}
//Build HTML Strings for Each Marker Hover
//Load the Array of Markers
plocation[i] = new google.maps.LatLng(val.lat, val.lng);
console.log(i +" : " +plocation[i]);
if(i === arraylength){
console.log("Load plocations called")
load_plocations();
}
});
$('#prov_list').html(htmlstring);
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function load_plocations(){
$(plocation).each(function(k,v){
console.log("Calling AddMarker: "+v)
addMarker(v,k);
});
}
function addMarker(location, name) {
console.log("Adding Marker: "+location)
marker = new google.maps.Marker({
position: location,
map: map
});
markersArray.push(marker);
}
//Clears the Markers from the map.
function clearOverlays() {
console.log("Clearing Overlays");
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
// Deletes all markers in the array by removing references to them
function deleteOverlays() {
console.log("Deleting Overlays");
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
尝试使用 var 声明标记:
var marker = new google.maps.Marker({
这将使它成为本地范围的对象,从而为每个迭代创建一个新对象。
如果没有 var,它将成为全局的(即,作用域为窗口对象)。 我不是 100% 确定,但我认为正如您所写,这可能会在每次迭代中覆盖相同的标记,而不是创建一个新标记。
地理编码器受速率限制和配额的约束。 "动态"对多个点进行地理编码以显示网页从来都不是一个好主意,这是您在循环中尝试执行的操作,这仅适用于少量标记。 下面是一个示例(使用 v2 API),该示例对通过 AJAX 传输的 xml 中的地址列表进行地理编码。
这是谷歌地图 API v3 文档中讨论地理编码策略的一篇文章。
最佳解决方案是提前知道点,请对其进行离线地理编码并存储坐标,以便在页面加载时使用。 如果它们是由用户输入的,请使用 API 中内置的客户端地理编码器。
相关文章:
- 如何使用javascript选择字符串的部分,添加html标记或删除部分
- 动态添加的标记不会'无法正确使用日期选择器
- 添加@javascript标记时,Cucumber中的HTTP身份验证失败
- 在 Javascript 生成的列表中,如何将自定义属性添加到 标记
- 如何在添加新标记和图层之前清除所有标记和图层的传单地图
- 如何在Phonegap中进行AJAX调用时添加加载屏幕
- 如何将多段线添加到标记阵列中
- 在添加新标记之前删除以前的标记
- 如何隐藏或删除Ngmap中动态添加的标记
- 在AngularJS模型中添加/删除标记
- 根据谷歌 Api v3 书/也用一个按钮添加一个标记
- 如何在加载前添加加载动画
- 通过添加自动标记库来了解 meteorjs 范围
- 在谷歌地图中添加新标记之前,先删除以前的标记
- 如何在网页加载之前添加加载页面
- 将数据属性添加到标记并使用 JQuery 检索它
- 将声音添加到标记数组 - 谷歌地图JavaScript
- 将侦听器添加到标记在循环中不起作用
- 在加载后添加预标记;t生效
- Google Maps API不会加载正确的中心位置,而是在最后添加的标记区域加载