javascript - 从 php 中按谷歌地图 api 中的城市名称自动填充州和国家/地区

Question

我已经在搜索上实现了 Google map API。我的代码在自动生成位置之前一直正常工作，但我想要这样的工具，通过它我可以通过仅提供城市名称而不是整个格式字符串来获取准确的位置。

例如:

请检查此图片 http://demo.ncryptedprojects.com/nct_bnb_clone_new/Untitled.png

我在搜索框中输入城市名称孟买，Google map API 会检索下拉列表中的所有值。当有人没有从下拉列表中选择任何值并直接在城市名称后按 Enter 时，我无法在 map 中精确搜索城市孟买。我真正想做的是，当有人输入城市名称然后搜索时，它应该自动从下拉列表中搜索第一个出现的位置，例如“印度孟买马哈拉施特拉邦”

HTML 表单

<input name="location" id="location" type="text"/>

Google map API

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>

$(function() {
            var e;
            e = $('.search-form input[name="location"]')[0];
            return new google.maps.places.Autocomplete(e, {
                types: ["geocode"]
            })

    });

Answer 1

这很棘手，因为默认情况下，Google 地点会查找 map 中心附近的位置，无论下拉列表中的建议如何。

因此，您必须从下拉列表中找到第一个建议，document.querySelector('.pac-item') - 提取位置并使用地理编码器查找该位置的经纬度。

提取位置的代码:

function extractLocation(item) {
    var text = item.innerText || item.textContent;
    var upper = text.toUpperCase();
    var result='';
    for (var i=0;i<text.length;i++) {
        if (text[i]==upper[i]) {
            result+=' ';
        }
        result+=text[i];
    }
    return result;
}

在搜索框中输入，选择第一个建议，提取位置，通过地理编码器查找纬度并放置标记:

input.onkeyup = function(e) {
   var code = (e.keyCode ? e.keyCode : e.which);
   var places = searchBox.getPlaces();
   if (code == 13 && places!=[]) {
     var firstSuggestion = document.querySelector('.pac-item');
     var query = extractLocation(firstSuggestion);
     geocoder.geocode({"address":query }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          clearMarkers();   
          var latLng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
          var marker = new google.maps.Marker({
             map: map,
             title: results[0].address_components[0].long_name,
             position: latLng,
          });
          markers.push(marker);
          map.setCenter(latLng);
          map.setZoom(10);
       }
     });
   } 
}

工作 fiddle -> http://jsfiddle.net/cdnT8/