我有一个简单的页面,包含GMap和Streetview div。虽然外部链接在两个div中都设置了一个新位置,但是在地图中单击处理程序尝试执行此操作会失败。 (我怀疑可能有一些关闭规则我不知道。)脚本如下:
var map, panorama;
function do_show ( a, b ) {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: a, lng: b}, zoom: 14
});
map.addListener ( 'click', function(e) {
do_show ( e.latLng.lat().toFixed(6), e.latLng.lng().toFixed(6) );
} ); // end addListener()
panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: {lat: a, lng: b},
pov: { heading: 34, pitch: 10 }
});
map.setStreetView(panorama);
} // end function do_show()
function pre_init () {
panorama = map = null;
do_show( 42.345573, -71.098326 ); // Boston
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=pre_init">
</script>
答案 0 :(得分:1)
我在javascript控制台中得到了自解释错误:InvalidValueError:setCenter:不是LatLng或LatLngLiteral:在属性lat中:不是数字(它们是字符串,而不是数字)。从中删除.toFixed(6)
。
map.addListener ( 'click', function(e) {
do_show ( e.latLng.lat(), e.latLng.lng() );
}); // end addListener()
代码段
html,
body,
#map,
#pano {
height: 100%;
margin: 0px;
padding: 0px
}
#map {
width: 50%;
float: right;
}
#pano {
width: 50%;
}
&#13;
<script>
var map, panorama;
function do_show(a, b) {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: a,
lng: b
},
zoom: 14
});
map.addListener('click', function(e) {
do_show(e.latLng.lat(), e.latLng.lng());
}); // end addListener()
panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: {
lat: a,
lng: b
},
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
} // end function do_show()
function pre_init() {
panorama = map = null;
do_show(42.345573, -71.098326); // Boston
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=pre_init">
</script>
<div id="map"></div>
<div id="pano"></div>
&#13;