Google Maps API不会加载正确的中心位置,而是在最后添加的标记区域加载
Google Maps API doesn't load the right centerposition, instead loads in the area of the last added marker
Google Maps API不加载initialize()函数中定义的中心位置,而是加载最后添加的标记(marker6)周围的未知位置。
是什么导致它不能加载正确的位置?
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB22617JOlm8uh6JVe-cuT3mOlyXd_Vb7o&sensor=true">
</script>
<script type="text/javascript">
var map;
$(document).ready(function() {
initialize();
var BW = new google.maps.LatLng(50.892726, 3.471283);
map.panTo(BW);
$("#test1").click(function() {
var BW = new google.maps.LatLng(50.892726, 3.471283);
map.panTo(BW);
resetLink();
$('#test1').css ({'color':'white'});
});
$("#test2").click(function() {
var BW2 = new google.maps.LatLng(50.863026,3.442379);
map.panTo(BW2);
resetLink();
$('#test2').css ({'color':'white'});
});
$("#test3").click(function() {
var BW3 = new google.maps.LatLng(50.748454,3.131254);
map.panTo(BW3);
resetLink();
$('#test3').css ({'color':'white'});
});
$("#test4").click(function() {
var BW4 = new google.maps.LatLng(49.272504,16.220863);
map.panTo(BW4);
resetLink();
$('#test4').css ({'color':'white'});
});
$("#test5").click(function() {
var BW5 = new google.maps.LatLng(51.498496,5.397516);
map.panTo(BW5);
resetLink();
$('#test5').css ({'color':'white'});
});
$("#test6").click(function() {
var BW6 = new google.maps.LatLng(52.35057,16.523513);
map.panTo(BW6);
resetLink();
$('#test6').css ({'color':'white'});
});
});
function resetLink() {
$('#test1').css ({'color':'#7faacb'});
$('#test2').css ({'color':'#7faacb'});
$('#test3').css ({'color':'#7faacb'});
$('#test4').css ({'color':'#7faacb'});
$('#test5').css ({'color':'#7faacb'});
$('#test6').css ({'color':'#7faacb'});
}
function initialize() {
var mapOptions = {
scrollwheel: false,
scaleControl: false,
center: new google.maps.LatLng(50.89266,3.47237),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var contentString = '<div id="content">'+
'<p><b>Building Plastics nv</b><br />' +
'Herlegemstraat 14<br />'+
'B-9771 Nokere<br />'+
'056 60 48 11'+
'</p>'+
'</div>';
var contentString2 = '<div id="content">'+
'<p><b>Building Windows</b><br />' +
'Grote Leiestraat 205<br />'+
'B-8570 Anzegem<br />'+
'056 62 11 40 '+
'</p>'+
'</div>';
var contentString3 = '<div id="content">'+
'<p><b>Building Plastics France</b><br />' +
'Avenue Europe 46<br />'+
'F-59435 Roncq Cedex<br />'+
'03 20 03 99 99 '+
'</p>'+
'</div>';
var contentString4 = '<div id="content">'+
'<p><b>Building Plastics CZ</b><br />' +
'Velkà Bíteš 76<br />'+
'595 01 Velkà Bíteš<br />'+
'800 400 115'+
'</p>'+
'</div>';
var contentString5 = '<div id="content">'+
'<p><b>Building Plastics NL</b><br />' +
'Magazijnweg 23<br />'+
'5683 CV Best<br />'+
'0499 37 53 27'+
'</p>'+
'</div>';
var contentString6 = '<div id="content">'+
'<p><b>Building Plastics PL</b><br />' +
'Przemyslowa 3<br />'+
'64-320 Buk<br />'+
'061 814 91 61'+
'</p>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 250,
});
var infowindow2 = new google.maps.InfoWindow({
content: contentString2,
maxWidth: 250,
});
var infowindow3 = new google.maps.InfoWindow({
content: contentString3,
maxWidth: 250,
});
var infowindow4 = new google.maps.InfoWindow({
content: contentString4,
maxWidth: 250,
});
var infowindow5 = new google.maps.InfoWindow({
content: contentString5,
maxWidth: 250,
});
var infowindow6 = new google.maps.InfoWindow({
content: contentString6,
maxWidth: 250,
});
var myLatlng = new google.maps.LatLng(50.8923380,3.477300);
var myLatlng2 = new google.maps.LatLng(50.862987,3.446863);
var myLatlng3 = new google.maps.LatLng(50.748411,3.136749);
var myLatlng4 = new google.maps.LatLng(49.271619,16.225359);
var myLatlng5 = new google.maps.LatLng(51.498349,5.401329);
var myLatlng6 = new google.maps.LatLng(52.350542,16.52786);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'BP1'
});
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map,
title: 'BP2'
});
var marker3 = new google.maps.Marker({
position: myLatlng3,
map: map,
title: 'BP3'
});
var marker4 = new google.maps.Marker({
position: myLatlng4,
map: map,
title: 'BP4'
});
var marker5 = new google.maps.Marker({
position: myLatlng5,
map: map,
title: 'BP5'
});
var marker6 = new google.maps.Marker({
position: myLatlng6,
map: map,
title: 'BP6'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map,marker2);
});
google.maps.event.addListener(marker3, 'click', function() {
infowindow3.open(map,marker3);
});
google.maps.event.addListener(marker4, 'click', function() {
infowindow4.open(map,marker4);
});
google.maps.event.addListener(marker5, 'click', function() {
infowindow5.open(map,marker5);
});
google.maps.event.addListener(marker6, 'click', function() {
infowindow6.open(map,marker6);
});
infowindow.open(map,marker);
infowindow2.open(map,marker2);
infowindow3.open(map,marker3);
infowindow4.open(map,marker4);
infowindow5.open(map,marker5);
infowindow6.open(map,marker6);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
First initialize();被调用并将位置设置为:
center: new google.maps.LatLng(50.89266,3.47237)
但是在那之后你调用这个:
var BW = new google.maps.LatLng(50.892726, 3.471283);
map.panTo(BW);
所以BW是你的新中心。你是这个意思吗?
好了,我找到问题了,
初始化时,它打开所有6个文本气球,导致错误?我知道确切的原因吗?
不管怎样,我改变了
infowindow.open(map,marker);
infowindow2.open(map,marker2);
infowindow3.open(map,marker3);
infowindow4.open(map,marker4);
infowindow5.open(map,marker5);
infowindow6.open(map,marker6);
$("#test2").click(function() {
infowindow2.open(map,marker2);
});
$("#test3").click(function() {
infowindow3.open(map,marker3);
});
$("#test4").click(function() {
infowindow4.open(map,marker4);
});
$("#test5").click(function() {
infowindow5.open(map,marker5);
});
$("#test6").click(function() {
infowindow6.open(map,marker6);
});
,所以它只打开文本气球当点击和发送到该位置。
不能解释为什么,因为我实际上不知道javascript那么好。
相关文章:
- 使用jQuery和PHP加载区域设置变量
- TineMCE 不会启动 ajax 加载的文本区域
- 文本区域在页面加载时未正确调整文本量的大小
- 在视图中从文本区域加载内容
- 在不重新加载整个页面的情况下更新网页的特定区域
- 将文本文件从手机存储加载到 HTML 文本区域
- 如何在页面加载时从文本区域设置范围的文本
- 是否可以在 spotfire 文本区域中显示图像/消息以等待加载数据
- 将 css 文件加载到文本区域
- [代码播放器]当 iframe 内容从文本区域使用 JavaScript 动态加载时,如何在 iframe 内查找元素
- 加载保存文本区域不起作用,如图所示
- D3JS 或 SNAPSVG 拖放仅限于加载的 svg 形状区域
- 将文本区域的内容保存到文件并从PHP服务器页面加载
- 如何在单击提交按钮时仅加载内容区域
- 将.txt文件加载到文本区域Javascript中
- 如何仅加载内容区域,跳过页眉和页脚加载到新页面中单击链接
- 使用 ngModel 作为绑定时,文本区域中加载的文本中的跳线会丢失
- 如何通过jquery将滚动头文本加载到顶部固定标题区域
- 无法用木偶.layoutview加载区域
- 用C3.js加载区域