如何指定仅适用于特定国家/地区的地图？ [复制]

Posted

技术标签:

【中文标题】如何指定仅适用于特定国家/地区的地图？ [复制]【英文标题】：How do I specific the map only available for specific country? [duplicate] 【发布时间】：2020-04-20 08:11:15 【问题描述】：

我使用谷歌云 MAP API 来自动完成地址字段。但我想把它限制在特定的国家。例如，列表地址仅适用于马来西亚地址。在这里，我附加了使用 google MAP API 获取地址自动完成的编码。目前，它也显示并列出了马来西亚以外的地址。我只希望它在马来西亚。我怎么做？ 

<html>
<head>
  <link rel="stylesheet" href="/home/azmi/Desktop/maphuhu/bootstrap.min.css">
</head>
<body>
<style>
.container 
  margin-top: 20px;

</style>
<script>
var placeSearch, autocomplete;
      var componentForm = 
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
      ;

      function initAutocomplete() 
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
            /** @type !HTMLInputElement */(document.getElementById('autocomplete')),
            types: ['geocode']);

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddress);
      

      function fillInAddress() 
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

        for (var component in componentForm) 
          document.getElementById(component).value = '';
          document.getElementById(component).disabled = false;
        

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) 
          var addressType = place.address_components[i].types[0];
          if (componentForm[addressType]) 
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
          
        
      

      // Bias the autocomplete object to the user's geographical location,
      // as supplied by the browser's 'navigator.geolocation' object.
      function geolocate() 
        if (navigator.geolocation) 
          navigator.geolocation.getCurrentPosition(function(position) 
            var geolocation = 
              lat: position.coords.latitude,
              lng: position.coords.longitude
            ;
            var circle = new google.maps.Circle(
              center: geolocation,
              radius: position.coords.accuracy
            );
            autocomplete.setBounds(circle.getBounds());
          );
        
      
</script>
<div class="container">
<div class="panel panel-primary">
  <div class="panel-heading">
    <h3 class="panel-title">Address</h3>
  </div>
  <div class="panel-body">
   <input id="autocomplete" placeholder="Enter your address"
      onFocus="geolocate()" type="text" class="form-control">
      <br>
   <div id="address">
      <div class="row">
         <div class="col-md-6">
            <label class="control-label">Street address</label>
            <input class="form-control" id="street_number" disabled="true">
         </div>
         <div class="col-md-6">
            <label class="control-label">Route</label>
            <input class="form-control" id="route" disabled="true">
         </div>
      </div>
      <div class="row">
         <div class="col-md-6">
            <label class="control-label">City</label>
            <input class="form-control field" id="locality" disabled="true">
         </div>
         <div class="col-md-6"> 
            <label class="control-label">State</label>
            <input class="form-control" id="administrative_area_level_1" disabled="true">
         </div>
      </div>
      <div class="row">
         <div class="col-md-6">
            <label class="control-label">Zip code</label>
            <input class="form-control" id="postal_code" disabled="true">
         </div>
         <div class="col-md-6">
            <label class="control-label">Country</label>
            <input class="form-control" id="country" disabled="true">
         </div>
      </div>
   </div>
</div>
  </div>
</div>  
<script src="https://maps.googleapis.com/maps/api/js?key=key23&libraries=places&callback=initAutocomplete" async defer></script>  
<script src="/home/azmi/Desktop/maphuhu/jquery-2.2.4.min.js" async defer></script>  
<script src="/home/azmi/Desktop/maphuhu/bootstrap.min.js" async defer></script>  

</body>
</html>

这是示例输出：

【问题讨论】：

***.com/questions/8282026/… 重复How to limit google autocomplete results to City and Country only 【参考方案1】：

将componentRestrictions 添加到AutocompleteOptions。

马来西亚的ISO 3166-1 Alpha-2 country code 是“我的”。

autocomplete = new google.maps.places.Autocomplete(
    /** @type !HTMLInputElement */(document.getElementById('autocomplete')), 
    componentRestrictions: country: 'my',
    types: ['geocode']
);

proof of concept fiddle

代码 sn-p：

var placeSearch, autocomplete;
var componentForm = 
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
;

function initAutocomplete() 
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  autocomplete = new google.maps.places.Autocomplete(
    /** @type !HTMLInputElement */
    (document.getElementById('autocomplete')), 
      componentRestrictions: 
        country: 'my'
      ,
      types: ['geocode']
    );

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  autocomplete.addListener('place_changed', fillInAddress);


function fillInAddress() 
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) 
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) 
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) 
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    
  


// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() 
  if (navigator.geolocation) 
    navigator.geolocation.getCurrentPosition(function(position) 
      var geolocation = 
        lat: position.coords.latitude,
        lng: position.coords.longitude
      ;
      var circle = new google.maps.Circle(
        center: geolocation,
        radius: position.coords.accuracy
      );
      autocomplete.setBounds(circle.getBounds());
    );
  

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">Address</h3>
    </div>
    <div class="panel-body">
      <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" class="form-control">
      <br>
      <div id="address">
        <div class="row">
          <div class="col-md-6">
            <label class="control-label">Street address</label>
            <input class="form-control" id="street_number" disabled="true">
          </div>
          <div class="col-md-6">
            <label class="control-label">Route</label>
            <input class="form-control" id="route" disabled="true">
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <label class="control-label">City</label>
            <input class="form-control field" id="locality" disabled="true">
          </div>
          <div class="col-md-6">
            <label class="control-label">State</label>
            <input class="form-control" id="administrative_area_level_1" disabled="true">
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <label class="control-label">Zip code</label>
            <input class="form-control" id="postal_code" disabled="true">
          </div>
          <div class="col-md-6">
            <label class="control-label">Country</label>
            <input class="form-control" id="country" disabled="true">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" async defer></script>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&&callback=initAutocomplete" async defer></script>

【讨论】：

以上是关于如何指定仅适用于特定国家/地区的地图？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章

如何将我在 iTunes 中的应用更改为我所在国家/地区的特定连接？

悬停在特定国家/地区时，在空白世界地图上突出显示国旗

隐藏特定国家/地区的产品价格 WooCommerce

显示每个国家的传单地图

如何使用 api 在谷歌地图中仅显示一个国家或特定区域？

如何显示/隐藏来自特定国家/地区的内容 [关闭]