Question

我正在使用Google地图Place Autocomplete Hotel Search服务来显示用户位置附近的所有酒店。

我为此做了一个演示，并且它在我的机器上工作正常。但我的要求是页面加载获取用户字段数据并在页面加载时显示最近的酒店。

例如目前发生的情况是，只有当我在文本框中输入某些区域/城市时才显示最近的酒店。

我是R＆amp; D Code.this是init函数的代码

function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: countries['in'].zoom,
          center: countries['in'].center,
          mapTypeControl: false,
          panControl: false,
          zoomControl: false,
          streetViewControl: false
        });

        infoWindow = new google.maps.InfoWindow({
          content: document.getElementById('info-content')
        });

        // Create the autocomplete object and associate it with the UI input control.
        // Restrict the search to the default country, and to place type "cities".
        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */ (
                document.getElementById('autocomplete')), {
              types: ['(cities)'],
              componentRestrictions: countryRestrict
            });
        places = new google.maps.places.PlacesService(map);

        autocomplete.addListener('place_changed', onPlaceChanged);

        // Add a DOM event listener to react when the user selects a country.
        document.getElementById('country').addEventListener(
            'change', setAutocompleteCountry);
      }

inpu字段的html是

  <div id="locationField">
      <input id="autocomplete" placeholder="Enter a city" type="text"  />
  </div>

那么我怎样才能获得价值并在负载上显示最近的酒店？例如：文本框的值为value=" Ahmedabad, Gujarat, India"因此，它会在页面加载时获得所有酒店最近的艾哈迈达巴德。

你可以检查我的小提琴Here 我也试试谷歌地理编码

var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': "Ahmedabad, Gujarat, India" }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
            });
        } else {
          alert("Problem with geolocation");
        }
      });

但这并没有显示酒店只将标记设置为艾哈迈达巴德。

Answer 1

您的initMap函数未正确启动。删除所有其他源代码并验证

function initMap() {alert("InitMap");}

另外，将您的googleapi地图js加载为

<script async defer  src="https://maps.googleapis.com/maps/api/js?key=XXXX&libraries=places&callback=initMap">

在加载时从谷歌地图中的字段获取值

1 个答案: