新的 google.maps.LatLngBounds() 绑定扩展和中心工作随机
new google.maps.LatLngBounds() bound extend and center working random
我正在尝试在地图上放置一些标记。数据从数据库中检索并使用 JSON 循环读取。
已放置标记,但我还试图在地图上显示所有标记并将视图居中。这似乎随机工作我刷新页面,有时它显示 3 个标记,有时它只显示我的起始 LatLng,它只是岛中间的一个随机点。如果我缩小,标记就在那里。所以这似乎是标记的 LatLng 有时没有在循环中扩展的问题。
非常感谢任何帮助。
<script type="text/javascript">
$(document).ready(function(){
var myCenter=new google.maps.LatLng(12.106058, -68.935192);
var mapOptions = {
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
bounds = new google.maps.LatLngBounds();
bounds.extend(myCenter);
$.getJSON('map.php',function(data){
if(data.success == true) {
if(data.CData.length > 0){
$.each(data.CData,function(index, value){
CID = value.CID;
Active = value.Active;
Name = value.Name;
Tel = value.Tel;
Lng = value.Longitude;
Lat = value.Latitude;
i=0;
addMarker(map, i, CID, Active, Name, Tel, Lat, Lng);
setBounds(Lat, Lng);
i++;
});
}
}
});
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
});
function addMarker(map, i, CID, Active, Name, Tel, Lat, Lng){
if (Active == 1){
if (Lat != null && Lng != null){
//alert("loop start!");
var myLatLng = new google.maps.LatLng(Lat, Lng);
var imageUrl = 'Images/default.png';
var markerImage = new google.maps.MarkerImage(imageUrl);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: markerImage,
title: Name,
zIndex: i
});
image = '<img src="image.php?cid='+CID+'" class="img-responsive img-thumbnail" />';
var content = '<div class="">'+image+'<h4>'+Name+'</h4><h4><span class="label label-danger">Tel: '+ Tel +'</span></h4></div>';
var infowindow = new google.maps.InfoWindow({
content: content,
maxWidth: 370
});
google.maps.event.addListener(marker, 'click', function (){
infowindow.open(map, marker);
});
}
}
}
function setBounds(Lat, Lng){
var newLatLng = new google.maps.LatLng(Lat, Lng);
bounds.extend(newLatLng);
}
</script>
获取标记数据的 ajax 调用异步发生,即它可以在您调用 map.setCenter 和 map.fitBounds 之后完成。您应该尝试将它们移动到您的 addMarker 函数中,或者仅在所有标记都完成添加后才执行,例如
$.getJSON('map.php',function(data){
if(data.success == true) {
if(data.CData.length > 0){
$.each(data.CData,function(index, value){
CID = value.CID;
Active = value.Active;
Name = value.Name;
Tel = value.Tel;
Lng = value.Longitude;
Lat = value.Latitude;
i=0;
addMarker(map, i, CID, Active, Name, Tel, Lat, Lng);
setBounds(Lat, Lng);
i++;
});
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
}
}
});
我正在尝试在地图上放置一些标记。数据从数据库中检索并使用 JSON 循环读取。
已放置标记,但我还试图在地图上显示所有标记并将视图居中。这似乎随机工作我刷新页面,有时它显示 3 个标记,有时它只显示我的起始 LatLng,它只是岛中间的一个随机点。如果我缩小,标记就在那里。所以这似乎是标记的 LatLng 有时没有在循环中扩展的问题。
非常感谢任何帮助。
<script type="text/javascript">
$(document).ready(function(){
var myCenter=new google.maps.LatLng(12.106058, -68.935192);
var mapOptions = {
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
bounds = new google.maps.LatLngBounds();
bounds.extend(myCenter);
$.getJSON('map.php',function(data){
if(data.success == true) {
if(data.CData.length > 0){
$.each(data.CData,function(index, value){
CID = value.CID;
Active = value.Active;
Name = value.Name;
Tel = value.Tel;
Lng = value.Longitude;
Lat = value.Latitude;
i=0;
addMarker(map, i, CID, Active, Name, Tel, Lat, Lng);
setBounds(Lat, Lng);
i++;
});
}
}
});
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
});
function addMarker(map, i, CID, Active, Name, Tel, Lat, Lng){
if (Active == 1){
if (Lat != null && Lng != null){
//alert("loop start!");
var myLatLng = new google.maps.LatLng(Lat, Lng);
var imageUrl = 'Images/default.png';
var markerImage = new google.maps.MarkerImage(imageUrl);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: markerImage,
title: Name,
zIndex: i
});
image = '<img src="image.php?cid='+CID+'" class="img-responsive img-thumbnail" />';
var content = '<div class="">'+image+'<h4>'+Name+'</h4><h4><span class="label label-danger">Tel: '+ Tel +'</span></h4></div>';
var infowindow = new google.maps.InfoWindow({
content: content,
maxWidth: 370
});
google.maps.event.addListener(marker, 'click', function (){
infowindow.open(map, marker);
});
}
}
}
function setBounds(Lat, Lng){
var newLatLng = new google.maps.LatLng(Lat, Lng);
bounds.extend(newLatLng);
}
</script>
获取标记数据的 ajax 调用异步发生,即它可以在您调用 map.setCenter 和 map.fitBounds 之后完成。您应该尝试将它们移动到您的 addMarker 函数中,或者仅在所有标记都完成添加后才执行,例如
$.getJSON('map.php',function(data){
if(data.success == true) {
if(data.CData.length > 0){
$.each(data.CData,function(index, value){
CID = value.CID;
Active = value.Active;
Name = value.Name;
Tel = value.Tel;
Lng = value.Longitude;
Lat = value.Latitude;
i=0;
addMarker(map, i, CID, Active, Name, Tel, Lat, Lng);
setBounds(Lat, Lng);
i++;
});
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
}
}
});