Question

有没有一种已知的方式可以在我的网站上显示世界地图，并允许用户选择一个国家/地区给他适当的内容？

我知道我可以嵌入谷歌地图，但对于谷歌地图，用户有不必要的控制，包括缩放，我不想打扰他。

我宁愿不使用flash。

感谢您提前。

Answer 1

您可以使用国家/地区列表创建一个select元素。每个选项应包含两个字母的ISO 3166-1 alpha-2国家/地区代码。选择国家/地区后，您可以使用组件过滤为该国家/地区执行地理编码请求。响应将返回该国家/地区的边界，因此您可以将Google地图放入这些边界。

请在jsbin上找到一个例子：http://jsbin.com/qaxucex/edit?html,output

代码段

  var map;
  var geocoder;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 0, lng: 0},
      zoom: 1
    });
    
    geocoder = new google.maps.Geocoder;
    
    var countryControlDiv = document.getElementById('countries');
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(countryControlDiv);
  }
  
  function showCountry(code) {
    if (code === "") {
       map.setOptions({
          center: {lat: 0, lng: 0},
          zoom: 1
       });
    } else {
       geocoder.geocode({
          componentRestrictions: {
            country: code
          }
       }, function(results, status) {
          if (status === 'OK') {
            map.fitBounds(results[0].geometry.bounds);
          } else {
            window.alert('Geocode was not successful for the following reason: ' +
            status);
          }
        });
    }
  }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 100%;
  }
  #countries {
    margin-top: 12px;
  }

<div id="countries">
  <select id="country" onchange="showCountry(this.value);">
    <option value="">--Select country--</option>
    <option value="DE">Germany</option>
    <option value="ES">Spain</option>
    <option value="US">USA</option>
  </select>
</div>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&v=3&callback=initMap"></script>

Answer 2

jqvmap似乎完全符合所述的需求。

如何在我的wesbite上显示地图并允许用户选择国家/地区

2 个答案: