附近搜索的标记仅显示在最后一张地图上
Markers from nearby search shown on last map only
我正在显示几个地图。首先,我有一个每个地图的代码,这变得相当大,所以我试图减少我的代码。然而,我似乎无法让这最后一件事发挥作用。谷歌附近搜索的结果总是显示在最后一张地图上。有没有一种方法可以在createmarker函数中设置映射,以便将标记设置为正确的映射(map[I])?我曾尝试将所有地图存储在MarkersArray中,但无法正常工作。谢谢
var map;
var infoWindow;
var service;
var request;
var i;
function initialize()
{
for (i = 2; i < locations.length-2; i++) {
var MapCenter = new google.maps.LatLng(locations[i][1],locations[i][2]); //CENTRE MAP: N/S, E(lower)/W
MyOptions =
{
zoom: 12,
center: MapCenter,
disableDefaultUI:true,
scrollwheel:false
};
map = new google.maps.Map(document.getElementById('map'+i), MyOptions);
var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.Celsius });
weatherLayer.setMap(map);
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
infoWindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
request = {
location: MapCenter,
radius: 10000,
types: ['airport','shopping_mall','subway_station','train_station','museum','place_of_worship','zoo','city_hall','local_government_office']
};
service.nearbySearch(request, callback);
};
};
function callback(results, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status);
return;
}
for (var j = 0, result; result = results[j]; j++) {
createMarker(result);
}
};
function createMarker(place) {
var gpmarker = new google.maps.MarkerImage(place.icon, null, null, null, new google.maps.Size(place.rating*5, place.rating*5));
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
title: place.name,
icon: gpmarker
});
google.maps.event.addListener(marker, 'click', function() {
service.getDetails(place, function(result, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status);
return;
}
infoWindow.setContent(result.name);
infoWindow.open(map, marker);
});
});
};
google.maps.event.addDomListener(window, 'load', initialize);
当前您正在覆盖变量map
、infoWindow
&循环中的service
,在结束时,所有变量都将具有上次迭代中分配的值。
保持变量不变(例如,通过函数使其"私有"),并将这些变量作为参数传递给callback()
和createMarker()
function initialize() {
for (i = 2; i < locations.length - 2; i++) {
(function (i) {
var MapCenter = new google.maps.LatLng(locations[i][1], locations[i][2]),
MyOptions = {
zoom: 12,
center: MapCenter,
disableDefaultUI: true,
scrollwheel: false
},
map = new google.maps.Map(document.getElementById('map' + i), MyOptions),
weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.Celsius,
map: map
}),
cloudLayer = new google.maps.weather.CloudLayer(),
infoWindow = new google.maps.InfoWindow(),
service = new google.maps.places.PlacesService(map),
request = {
location: MapCenter,
radius: 10000,
types: ['airport',
'shopping_mall',
'subway_station',
'train_station',
'museum',
'place_of_worship',
'zoo', 'city_hall',
'local_government_office'
]
};
cloudLayer.setMap(map);
service.nearbySearch(request, function (results, status) {
callback(results, status, map, infoWindow, service)
});
}(i))
};
};
function callback(results, status, map, infoWindow, service) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status);
return;
}
for (var j = 0, result; result = results[j]; j++) {
createMarker(result, map, infoWindow, service);
}
};
function createMarker(place, map, infoWindow, service) {
//your current code may stay as it is
};
google.maps.event.addDomListener(window, 'load', initialize);
相关文章:
- 有人能提供一张ember数据与broswer's的持久层
- jQuery只隐藏<tr>在一张桌子上
- 如何从三张图片中选择一张?其余的必须是看不见的
- 通过onclick事件将一张图片更改为6张图片
- Sequelize hasMany浏览另一张表
- jm按下停止步骤进入滚动的下一张幻灯片
- 我用JavaScript FIleReader读了一张图片,但是我无法得到图片的信息
- 当 Flickity 到达下一张或上一张幻灯片时的事件
- 用d3和topojson绘制一张地图
- 附近搜索的标记仅显示在最后一张地图上
- 一张 Ovi 地图上有 2 条或更多路线
- 根据标记在另一张地图中的拖动来更新地图中心
- Esri Javascript API人口普查信息弹出和公园弹出一张地图
- 在一张地图上显示多个谷歌地图标记和方向
- 我怎样才能拥有一张地图<字符串,integer>在javaScript中
- 一页多张地图-ColdFusion
- 我试图在一个给定地址的网站上加载多个谷歌地图.最后一张地图是唯一显示的地图
- 在谷歌地图上放一张图片
- 多种出行模式,使用谷歌地图 API 渲染一张地图
- 我如何使用算法随机生成一张“地图”?使用预设图像