可能有多种解决方案,我建议存储地图、标记和全景实例,然后您只需在进一步调用时更新它们的属性,而不是创建新实例。
单击按钮时调用该函数:
load_map_and_street_view_from_address($('textarea[name="new_address"]').val());
替代create_map_and_streetview
& showPanoData
:
function create_map_and_streetview(lat, lng, map_id, street_view_id) {
var goo=google.maps,
map=$('#'+map_id),
pano=document.getElementById("pano"),
addLatLng = new goo.LatLng(lat, lng),
myOptions = {
zoom: 14,
center: addLatLng,
mapTypeId: goo.MapTypeId.ROADMAP,
backgroundColor: 'transparent',
streetViewControl: false,
keyboardShortcuts: false
}
if(!map.data('gmap')){
//store the instances per $.data
map.data('gmap',new goo.MVCObject());
map.data('gmap').set('panorama',new goo.StreetViewPanorama(pano));
map.data('gmap').set('service',new goo.StreetViewService());
map.data('gmap').set('map',new goo.Map(map[0], myOptions));
map.data('gmap').set('marker',new goo.Marker({
map: map.data('gmap').get('map'),
animation: goo.Animation.DROP,
position: addLatLng
})
);
}else{
map.data('gmap').get('map').setCenter(addLatLng);
map.data('gmap').get('marker').setPosition(addLatLng);
//always create a new panorama
//otherwise the panorama will be broken as soon as there is no picture available
map.data('gmap').set('panorama',new goo.StreetViewPanorama(pano));
}
map.data('gmap').get('service')
.getPanoramaByLocation(addLatLng, 50, function(panoData, status){
if (status != google.maps.StreetViewStatus.OK) {
$('#pano').html('No StreetView Picture Available')
.attr('style', 'text-align:center;font-weight:bold').show();
return;
}
var angle = computeAngle(addLatLng, panoData.location.latLng);
var panoOptions = {
position: addLatLng,
addressControl: false,
linksControl: false,
panControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
pov: {
heading: angle,
pitch: 10,
zoom: 1
},
enableCloseButton: false,
visible: true
};
map.data('gmap').get('panorama').setOptions(panoOptions);
});
}
Demo: http://jsfiddle.net/R59mB/4/