我有以下页面，默认打开以法国为中心的 map :
http://www.villasdirect.com/_admin/dev/Country_MapV3.asp
它似乎确实可以自动缩放到一定程度，但是当我查看法国或德国(仅举几个例子)时，这些国家/地区缩放得不够近。但是，如果我搜索伦敦，它似乎非常完美 - 就像在框中填满伦敦 map 一样。
你可以在这里看到不同的结果:
http://www.villasdirect.com/_admin/dev/Country_MapV3.asp?l=france
我的目标是在选择时用国家、城镇或地区填充 map ...可能吗？
一如既往地感谢您的帮助!
这也是我的代码:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
location = request.QueryString("l")
if location = "" then location = "France"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<div id="map" style="width: 800px; height: 600px"></div>
<form onsubmit="showAddress(); return false" action="#">
<input id="search" size="60" type="hidden" value="<%=location%>" />
</form>
<div id="message"></div>
<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>
<script type="text/javascript">
//<![CDATA[
var xmlsource = '<markers><marker Town="Fayence" Region="Provence - Var" type="green" lng="6.694103" lat="43.624076"/><marker Town="La Cadiere d\'Azur" Region="Provence - Var" type="green" lng="5.755173" lat="43.196218"/><marker Town="Villefranche Du Périgord" Region="South West France" type="green" lng="1.080006" lat="44.62966"/><marker Town="Limetz-Villez" Region="Paris" type="green" lng="1.547366" lat="49.029137"/><marker Town="Boulogne-Billancourt" Region="Paris" type="green" lng="2.237803" lat="48.84325"/><marker Town="Saint-Germain-En-Laye" Region="Paris" type="green" lng="2.0934031" lat="48.8955155"/></markers>'
var myOptions = {
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var infoWindow = new google.maps.InfoWindow;
$( $.parseXML( xmlsource ) ).find("marker").each(function() {
var lng = $(this).attr('lng');
var lat = $(this).attr('lat');
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(59.32522, 18.07002)
});
});
google.maps.event.addListener(marker, 'click');
// ====== Create a Client Geocoder ======
var geo = new google.maps.Geocoder();
geo.geocode({'address': document.getElementById("search").value}, function (results, status) {
var ne = results[0].geometry.viewport.getNorthEast();
var sw = results[0].geometry.viewport.getSouthWest();
map.fitBounds(results[0].geometry.viewport);
placeMarkers();
});
function placeMarkers(){
var xmlList = $.parseXML(xmlsource);
var markers = $(xmlList).find('marker');
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat($(markers[i]).attr("lat")),
parseFloat($(markers[i]).attr("lng")));
var type = $(markers[i]).attr("type");
var imgnam = "";
if(type == "green") {
imgnam = "http://openmbta.org/images/map/PinDown1Green.png?1306943843";
}else{
imgnam = "http://openmbta.org/images/map/PinDown1.png?1306943843";
}
var img = new google.maps.MarkerImage(
imgnam,
new google.maps.Size(30,35),
new google.maps.Point(0,0),
new google.maps.Point(15,35)
);
//add a link to your xml that can be inserted here where I have http://www.google.com
var html = "<a href='http://www.google.com'>" + $(markers[i]).attr('Region') + ', ' + $(markers[i]).attr('Town') + "</a>";
var marker = new google.maps.Marker({position: latlng, map: map, icon: img, html:html});
var infowindow1 = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow1.setContent(this.html);
infowindow1.open(map, this);
});
}
}
</script>
</body>
</html>
最佳答案
这是一个老问题，但我想我有答案了。而不是这个:
map.fitBounds(results[0].geometry.viewport);
试试这个:
map.fitBounds(results[0].geometry.bounds);
根据谷歌地图 API documentation results.geometry.bounds 可能会返回一个略有不同的视口(viewport)。这不完全是解决方案，但值得一试。
此外，据我所知，Google map 没有无限缩放级别的图像，当调用 fitBounds() 时，它会自动选择包含给定边界的最高缩放级别 和图像可用的位置。在您的情况下，边界是法国的边界，视口(viewport)在当前缩放级别适合法国的边界。如果您再放大一个缩放级别，法国的边界就会超出视口(viewport)。
您可以更改视口(viewport)的大小。对于特定尺寸的视口(viewport)(我不能准确说出尺寸)，您可能会达到完美契合。你举了伦敦的例子。我敢肯定，对于某些视口(viewport)尺寸，伦敦也不完全适合视口(viewport)。因此，您偶然发现了适合伦敦的视口(viewport)尺寸。
如果您仍然想要更多缩放，并且不能更改视口(viewport)大小，我建议您尝试 getZoom() 然后将结果递增 1 和 setZoom() .然后，这会将边界区域渲染到视口(viewport)之外。
干杯!
关于javascript - 谷歌地图自动缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15244122/