我写了一个包含Google地图并使用“地方自动填充”的表单。在同一页面上,我有一个按钮来添加另一个位置,所以我正在添加另一个map-canvas div并尝试初始化另一个地图副本。
我已按如下方式修改Google Map javascript,以便能够将变量传递给函数以附加到其他元素:
<script>
function initialize(mapid) {
var mapOptions = {
center: new google.maps.LatLng(51.5112139, -0.1198244),
zoom: 9,
disableDefaultUI: true,
mapTypeControl: false,
scaleControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas' + mapid),
mapOptions);
var input = (document.getElementById('input' + mapid));
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setIcon(({
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(35, 35)
}));
marker.setPosition(place.geometry.location);
marker.setVisible(true);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
});
}
//google.maps.event.addDomListener(window, 'load', initialize);
$( document ).ready(function() {
initialize(1);
});
</script>
请注意,我注释了标准Google初始化地图的方式,并将其替换为JQuery方法,因为Google方式不喜欢参数。
上面的工作是加载第一张地图的页面,但是当我尝试使用以下on('click')
添加第二张时,对初始化的调用会破坏脚本。
$(function() {
var mapdiv = $('.parentclass');
var m = $('.parentclass div.well').size() + 1;
$('#addMap').on('click', function() {
$('<div class="well"><div id="map-canvas'+m+'" class="map-canvas"></div></div>').appendTo(mapdiv).hide().fadeIn('60');
initialize(m);
m++;
return false;
});
});;
如果我注释掉initialize(m)
调用,它会创建空井,所以我知道这是调用它来破坏它的东西。我已经确认了m变量,它计算已经存在的.well div的数量,正确计算正确的数字。那么为什么在加载文档时initialize(1)
工作,但是在'on('Click')`函数上,它会在那里打破?
答案 0 :(得分:0)
在这种情况下,新创建的地图缺少一个输入字段来绑定自动完成,但感谢twil提示jsfiddle,这让我发现问题比主演一堆代码要容易得多我一直在当地玩。