วิธี จำกัด ผลลัพธ์การเติมข้อความอัตโนมัติของ Google เฉพาะเมืองและประเทศเท่านั้น

198

ฉันใช้ javascript ในสถานที่เติมข้อความอัตโนมัติของ Google เพื่อส่งคืนผลลัพธ์ที่แนะนำสำหรับช่องค้นหาของฉันสิ่งที่ฉันต้องการคือแสดงเฉพาะเมืองและประเทศที่เกี่ยวข้องกับตัวอักษรที่ป้อน แต่ google api จะให้ผลลัพธ์สถานที่ทั่วไปจำนวนมากซึ่งฉันไม่ต้องการ เพื่อ จำกัด ผลลัพธ์ที่จะแสดงเฉพาะเมืองและประเทศ

ฉันกำลังใช้ตัวอย่างต่อไปนี้:

<html>
<head>
<style type="text/css">
   body {
         font-family: sans-serif;
         font-size: 14px;
   }
</style>

<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places" type="text/javascript"></script>
<script type="text/javascript">
   function initialize() {
      var input = document.getElementById('searchTextField');
      var autocomplete = new google.maps.places.Autocomplete(input);
   }
   google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
   <div>
      <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
   </div>
</body>
</html>

javascript autocomplete google-maps-api-3

— JohnTaa
แหล่งที่มา

372

คุณสามารถลอง จำกัด ประเทศได้

function initialize() {

 var options = {
  types: ['(cities)'],
  componentRestrictions: {country: "us"}
 };

 var input = document.getElementById('searchTextField');
 var autocomplete = new google.maps.places.Autocomplete(input, options);
}

ข้อมูลเพิ่มเติม:

ISO 3166-1 alpha-2สามารถใช้เพื่อ จำกัด ผลลัพธ์ให้เฉพาะกลุ่ม ขณะนี้คุณสามารถใช้ componentRestrictions เพื่อกรองตามประเทศ

ประเทศจะต้องถูกส่งเป็นอักขระสองตัวคือรหัสประเทศที่เข้ากันได้กับ ISO 3166-1 Alpha-2

รหัสประเทศที่กำหนดอย่างเป็นทางการ

— Francois
แหล่งที่มา

คุณรู้หรือไม่ว่ามีการ จำกัด การใช้งานสำหรับการสืบค้นอัตโนมัติสมบูรณ์หรือไม่หากฉันไม่ได้โหลดแผนที่? ฉันรู้ว่ามีการ จำกัด การใช้งาน 25,000 ครั้งหากฉันโหลดแผนที่

— Mithil

4

คือสิงหาคม 2014 เป็นไปได้ไหมที่จะแสดงเฉพาะประเทศและเมืองเท่านั้น เช่นเมื่อฉันพิมพ์ Mil ผลลัพธ์คือ Milan, Bergamo, Italy ฉันต้องการเพียงมิลาน, อิตาลี การเพิ่มทุกประเทศทีละตัวไม่ใช่ตัวเลือก

— erdomester

2

เป็นไปได้หรือไม่ที่จะระบุมากกว่าหนึ่งประเทศ

— บาร์ต

2

@bart เห็นได้ชัดว่าเป็นไปไม่ได้ โปรดติดดาวปัญหานี้หากคุณต้องการคุณสมบัตินี้

— dlsso

1

หากเราใช้ประเภท: ['(เมือง)'] มันจะไม่อนุญาตให้เราค้นหาด้วยรหัสไปรษณีย์ที่นี่

— Mohneesh Agrawal

23

<html>
<head>
<style type="text/css">
   body {
         font-family: sans-serif;
         font-size: 14px;
   }
</style>

<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<script type="text/javascript">
   function initialize() {
      var input = document.getElementById('searchTextField');
      var options = {
        types: ['geocode'] //this should work !
      };
      var autocomplete = new google.maps.places.Autocomplete(input, options);
   }
   google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
   <div>
      <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
   </div>
</body>
</html>

ขยายตัวอย่างข้อมูล

var options = {
  types: ['geocode'] //this should work !
};
var autocomplete = new google.maps.places.Autocomplete(input, options);

อ้างอิงถึงประเภทอื่น ๆ : http://code.google.com/apis/maps/documentation/places/supported_types.html#table2

— UnLoCo
แหล่งที่มา

1

ตรวจสอบรหัสนี้จาก google พวกเขาทำตัวอย่างการกรองcode.google.com/apis/maps/documentation/javascript/…

— UnLoCo

วัตถุเติมข้อความอัตโนมัติจะไม่ยอมรับตัวแปรสองตัวมีเพียงหนึ่งตัวแปรเท่านั้นที่สามารถยอมรับได้ซึ่งก็คือ 'รหัสภูมิศาสตร์' ฉันไม่รู้วิธีแก้ปัญหานี้ รายการเอกสารของ Google มีหลายประเภท แต่ไม่สามารถยอมรับได้

— JohnTaa

พารามิเตอร์เดียวกันจะทำงานได้AutocompleteServiceอย่างไร

— Steven Aguilar

12

ลองนี้

<html>
<head>
<style type="text/css">
   body {
         font-family: sans-serif;
         font-size: 14px;
   }
</style>

<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places&region=in" type="text/javascript"></script>
<script type="text/javascript">
   function initialize() {
      var input = document.getElementById('searchTextField');
      var autocomplete = new google.maps.places.Autocomplete(input);
   }
   google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
   <div>
      <input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
   </div>
</body>
</html>

ขยายตัวอย่างข้อมูล

http://maps.googleapis.com/maps/api/js?sensor=false&l ไลบรารี=places "type =" text / javascript "

เปลี่ยนเป็น: "region = in" (in = india)

" http://maps.googleapis.com/maps/api/js?sensor=false&l ไลบรารี=places®ion=in " type = "text / javascript"

— ราวินทรา
แหล่งที่มา

เราต้องการรายชื่อเมืองรายชื่อรัฐรายชื่อพื้นที่และอื่น ๆ

— Shadab K

นี่ควรเป็นคำตอบที่ยอมรับได้ วิธีที่ง่ายที่สุดและเร็วที่สุดเพื่อให้ได้ผลลัพธ์ตามที่ OP ต้องการ และมันก็ได้ผลกับฉันด้วย

— user2056633

9

คำตอบที่ได้รับจากผล Francois ในรายชื่อเมืองทั้งหมดจากประเทศ แต่ถ้าความต้องการคือการแสดงรายการภูมิภาคทั้งหมด (เมือง + รัฐ + ภูมิภาคอื่น ๆ ฯลฯ ) ในประเทศหรือสถานประกอบการในประเทศคุณสามารถกรองผลลัพธ์ตามประเภทการเปลี่ยนแปลง

แสดงเฉพาะเมืองในประเทศ

 var options = {
  types: ['(cities)'],
  componentRestrictions: {country: "us"}
 };

รายการเมืองรัฐและภูมิภาคทั้งหมดในประเทศ

 var options = {
  types: ['(regions)'],
  componentRestrictions: {country: "us"}
 };

รายการสถานประกอบการทั้งหมด - เช่นร้านอาหารร้านค้าและสำนักงานในประเทศ

  var options = {
      types: ['establishment'],
      componentRestrictions: {country: "us"}
     };

ข้อมูลเพิ่มเติมและตัวเลือกมีอยู่ที่

https://developers.google.com/maps/documentation/javascript/places-autocomplete

หวังว่านี่อาจเป็นประโยชน์กับใครบางคน

— Kiran Muralee
แหล่งที่มา

9

โดยพื้นฐานเหมือนกับคำตอบที่ยอมรับ แต่อัปเดตด้วยข้อ จำกัด ประเภทใหม่และหลายประเทศ:

function initialize() {

 var options = {
  types: ['(regions)'],
  componentRestrictions: {country: ["us", "de"]}
 };

 var input = document.getElementById('searchTextField');
 var autocomplete = new google.maps.places.Autocomplete(input, options);
}

การใช้'(regions)'แทนที่จะ'(cities)'อนุญาตให้ค้นหาด้วยรหัสไปรษณีย์และชื่อเมือง

ดูเอกสารอย่างเป็นทางการตารางที่ 3: https://developers.google.com/places/supported_types

— seBaka28
แหล่งที่มา

8

ฉันได้ลองเล่นกับ Google Autocomplete API มาระยะหนึ่งแล้วและนี่เป็นทางออกที่ดีที่สุดที่ฉันสามารถหาเพื่อ จำกัด ผลลัพธ์ของคุณเฉพาะประเทศ:

var autocomplete = new google.maps.places.Autocomplete(input, options);
var result = autocomplete.getPlace();
console.log(result); // take a look at this result object
console.log(result.address_components); // a result has multiple address components

for(var i = 0; i < result.address_components.length; i += 1) {
  var addressObj = result.address_components[i];
  for(var j = 0; j < addressObj.types.length; j += 1) {
    if (addressObj.types[j] === 'country') {
      console.log(addressObj.types[j]); // confirm that this is 'country'
      console.log(addressObj.long_name); // confirm that this is the country name
    }
  }
}

หากคุณดูที่วัตถุผลลัพธ์ที่ส่งคืนคุณจะเห็นว่ามีอาร์เรย์ address_components ซึ่งจะมีวัตถุหลายรายการที่แสดงส่วนต่าง ๆ ของที่อยู่ ภายในแต่ละวัตถุเหล่านี้จะมีอาเรย์ 'ประเภท' และในอาเรย์ประเภท 'นี้คุณจะเห็นป้ายกำกับต่าง ๆ ที่เกี่ยวข้องกับที่อยู่รวมถึงที่อยู่หนึ่งแห่งสำหรับประเทศ

— wmock
แหล่งที่มา

มีวิธี จำกัด เฉพาะบางรัฐในสหรัฐอเมริกาหรือไม่หรือยกเว้นรัฐบางรัฐ

— Martin Erlic

@santafebound ฉันกำลังพยายามทำสิ่งเดียวกัน (สำหรับรัฐเฉพาะในออสเตรเลีย) จากเอกสารดูเหมือนว่าคำตอบคือ 'ไม่ [ยัง]' แต่ฉันหวังว่าจะหาวิธีที่จะดักจับresponseวัตถุและ จำกัด โดยปุ่มอื่น ๆ ในข้อมูล

— GT

4

นอกจากนี้คุณจะต้องซูมและจัดกึ่งกลางแผนที่เนื่องจากข้อ จำกัด ของประเทศของคุณ!

เพียงใช้การซูมและพารามิเตอร์กึ่งกลาง! ;)

function initialize() {
  var myOptions = {
    zoom: countries['us'].zoom,
    center: countries['us'].center,
    mapTypeControl: false,
    panControl: false,
    zoomControl: false,
    streetViewControl: false
  };

  ... all other code ...

}

— Kir Mazur
แหล่งที่มา

4

ฉันพบทางออกสำหรับตัวเอง

var acService = new google.maps.places.AutocompleteService();
var autocompleteItems = [];

acService.getPlacePredictions({
    types: ['(regions)']
}, function(predictions) {
    predictions.forEach(function(prediction) {
        if (prediction.types.some(function(x) {
                return x === "country" || x === "administrative_area1" || x === "locality";
            })) {
            if (prediction.terms.length < 3) {
                autocompleteItems.push(prediction);
            }
        }
    });
});

วิธีนี้แสดงเฉพาะเมืองและประเทศ ..

— Cenk YAGMUR
แหล่งที่มา

คุณสามารถให้รายการรหัสแบบสมบูรณ์ด้วยการเติมข้อความอัตโนมัติ

— Volodymyr Khmil

2

<html>
  <head>
    <title>Example Using Google Complete API</title>   
  </head>
  <body>

<form>
   <input id="geocomplete" type="text" placeholder="Type an address/location"/>
    </form>
   <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

  <script src="http://ubilabs.github.io/geocomplete/jquery.geocomplete.js"></script>
  <script>
   $(function(){        
    $("#geocomplete").geocomplete();                           
   });
  </script>
 </body>
</html>

สำหรับข้อมูลเพิ่มเติมโปรดเยี่ยมชมลิงค์นี้

— Hina Vaja
แหล่งที่มา