最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Country specific zoom level in Google Maps API - Stack Overflow

programmeradmin4浏览0评论

I'm trying to make a Google Map that only shows the Netherlands. But when I use zoom level 6 it shows Belgium and Germany as well and when I use zoom level 7 it zooms too far in that it doesn't show the plete country.

How can I make The Netherlands show only, and not germany and belgium (or at least a very tiny part of them).

Currently it looks something like this:

I'm trying to make a Google Map that only shows the Netherlands. But when I use zoom level 6 it shows Belgium and Germany as well and when I use zoom level 7 it zooms too far in that it doesn't show the plete country.

How can I make The Netherlands show only, and not germany and belgium (or at least a very tiny part of them).

Currently it looks something like this:

Share Improve this question asked Jan 24, 2015 at 14:22 Melvin KoopmansMelvin Koopmans 3,0603 gold badges27 silver badges35 bronze badges 2
  • 1 Zoom levels are integer values, you might not be able to get the exact size (and the Netherlands isn't rectangular). You could do something like this, make an inverted polygon that has a "hole" over the Netherlands and covers the rest of the world. – geocodezip Commented Jan 24, 2015 at 15:46
  • Well given that the Netherlands borders Belgium and Germany, you're always going to show them (partly at least) if you show all of the country. You could always adjust the width and height of the map div to crop it a bit at zoom level 6 – duncan Commented Jan 24, 2015 at 15:47
Add a ment  | 

1 Answer 1

Reset to default 9
  1. go to http://www.gadm/download, download the adm0 file for the Netherlands

  2. Combine that polygon (as the inner ring(s)) with a polygon that covers the whole earth

  3. use the winding reversal tool to reverse any inner polygons that don't wind opposite the outer ring.

  4. zip up the resulting kml, rename to kmz. Display on the map using geoxml3

Code:

function initialize() {
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(85.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var geocoder = new google.maps.Geocoder();
    var geoXml = new geoXML3.parser({
                    map: map,
                    zoom: false, 
                 });
    geoXml.parse("http://www.geocodezip./geoxml3_test/kmz/nld_adm0_inverted.kmz");
    google.maps.event.addListener(geoXml,'parsed', function() {
      geocoder.geocode( { 'address': "Netherlands"}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.fitBounds(results[0].geometry.viewport);
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });    
    })
}
google.maps.event.addDomListener(window, "load", initialize);

Working example

To restrict it to be always displayed on the map see this page from Mike Williams' v2 tutorial

working example

发布评论

评论列表(0)

  1. 暂无评论