javascript - 搜索没有地点的 Google map 框

标签 javascript google-maps google-maps-api-3 google-places-api

如果我订阅了 Google Maps API,但未订阅 Google Places API,是否可以从搜索词找到位置点

类似于this CODEPEN的东西(使用地点)

(function() {

  var marker;
  var map = new google.maps.Map(document.getElementById('map'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var input = document.getElementById('search');
  var searchBox = new google.maps.places.SearchBox(input);
  
  google.maps.event.addListener(searchBox, 'places_changed', updateMap);

  function updateMap() {
    var places = searchBox.getPlaces();
    var place = places[0];
    var radius = 1000000;

    if (marker) { marker.setMap(null); }

    marker = new google.maps.Marker({
      map: map, title: place.name,
      position: place.geometry.location
    });

    var circle = new google.maps.Circle({
      center: marker.position, radius: radius
    });
    map.fitBounds(circle.getBounds());
  }
})();
<input id="search" type="text" placeholder="Search Here">
<h2/>
<div id="map"></div>

最佳答案

您可以利用Geocoding Service为此目的:

The Google Maps API provides a geocoder class for geocoding and reverse geocoding dynamically from user input.

示例

function initMap() {

    var marker;
    var map = new google.maps.Map(document.getElementById('map'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var btnSearch = document.getElementById('btnSearch');
    addEvent(btnSearch, 'click', function () {
        var input = document.getElementById('search');
        updateMap(map, input.value);
    });
}



function updateMap(map, address) {

    var geocoder = new google.maps.Geocoder();
    if (geocoder) {
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                //console.log(results[0].geometry.location);

                var result = results[0];
                var radius = 1000000;
                var marker = new google.maps.Marker({
                    map: map,
                    title: result.formatted_address,
                    position: result.geometry.location
                });

                var circle = new google.maps.Circle({
                    center: marker.position,
                    radius: radius
                });
                map.fitBounds(circle.getBounds());

            }
            else {
                console.log("Geocoding failed: " + status);
            }
        });
    }


}


function addEvent(element, evnt, funct) {
    if (element.attachEvent)
        return element.attachEvent('on' + evnt, funct);
    else
        return element.addEventListener(evnt, funct, false);
}
#map{
     width: 640px;
     height: 480px;
}
  <input id="search" type="text" placeholder="Search Here">
  <button id="btnSearch">Search</button>
  <h2 />
  <div id="map"></div>
  <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
                async defer></script>

关于javascript - 搜索没有地点的 Google map 框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33497926/

相关文章:

javascript - 如何从谷歌地图标记数组中找出点击了哪个标记

javascript - Slick Slider ...没有当前的类可供使用

Javascript 变量返回未定义

javascript - CSS 应该总是在 Javascript 之前吗?

Android:定位debug.keystore时命令行出现keytool错误

java - 如何从抽屉导航调用 Fragment Activity

javascript - Angularjs - 克隆的 html 正在失去 $scope

android - 计算指定区域的经纬度范围

javascript - 是否可以将 Google map 自动完成的搜索限制在自治市镇

javascript - 在Google map 中获取Clicked标记并将其发送给函数