2

我有以下页面，默认情况下会打开以法国为中心的地图：

http://www.villasdirect.com/_admin/dev/Country_MapV3.asp

它似乎在一定程度上会自动缩放，但是当我查看法国或德国（仅举几个例子）时，这些国家的放大距离不够近。然而，如果我搜索伦敦，它似乎非常完美——就像用伦敦地图填充盒子一样。

你可以在这里看到不同的结果：

http://www.villasdirect.com/_admin/dev/Country_MapV3.asp?l=france

我的目标是在选择时用国家、城镇或地区填充地图......可能吗？

一如既往的帮助！

这也是我的代码：

<%@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>
4

2 回答 2

1

这是一个老问题，但我想我有一个答案。而不是这个：

map.fitBounds(results[0].geometry.viewport);

尝试这个：

map.fitBounds(results[0].geometry.bounds);

根据 Google Maps API文档 results.geometry.bounds，可能会返回稍微不同的视口。这不完全是一个解决方案，但值得一试。

此外，据我了解，谷歌地图没有无限缩放级别的图像，当fitBounds()被调用时，它会自动选择包含给定边界和图像可用的最高缩放级别。在您的情况下，边界是法国的边界，视口在当前缩放级别适合法国的边界。如果再进一步放大一级，法国的边界就会超出视口。

您可以更改视口的大小。对于一定大小的视口（我不能确切地说出是什么大小），您可能会获得完美的配合。你举了一个伦敦的例子。我敢肯定，对于某些视口大小，伦敦也不完全适合视口。因此，您偶然发现了一个非常适合伦敦的视口尺寸。

如果您仍然想要更多缩放，并且无法更改视口大小，我建议您尝试getZoom()然后将结果增加 1 和setZoom(). 再说一次，这会将边界区域渲染到视口之外。

干杯！

于 2013-08-08T00:56:18.353 回答
0

Afaik 无法从谷歌获取有关某个区域（无论是城市/县/国家/地区）的物理尺寸的信息。

如果您自己有一个数据库，其中包含每个城市/州/国家组合的大小，那么我想您可以通过比较来做到这一点。

否则，你几乎被这个卡住了。

于 2013-03-06T11:26:06.613 回答