时间戳

首页 > 解决方案 > 如何输出附近的搜索？

javascript - 如何输出附近的搜索？

问题描述

所以，我试图根据我选择的位置（自动完成）输出附近的搜索谷歌 API，我设法使自动完成工作，但是，它仍然没有显示附近的搜索服务。你可以帮帮我吗？

如您所见place = autocomplete.getPlace();，在搜索框中选择了位置。

html

<body>
<input id="autocomplete" type="text" placeholder="Enter City">
        <div class="map">
            <div id="map"></div>
        </div>

<footer>


</footer>    

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

Javascript

var infowindow;
var service;

 var marker;
 var input;
 var place;
 var options;
var map;

function initMap(){
 var options= {lat:53.3498,lng:-6.2603};

      var map = new google.maps.Map(document.getElementById("map"),{
         zoom: 8,
         center: options,

      }); 


       var input = document.getElementById('autocomplete');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);




var marker = new google.maps.Marker({

    position: options,
    map: map,
    anchorPoint: new google.maps.Point(0, -29)
});






   autocomplete.addListener('place_changed', function(){
   marker.setVisible(false);
   place = autocomplete.getPlace();
   map:map;

  if (place) {
       // map.fitBounds(placeselected.geometry.viewport);
        map.setCenter(place.geometry.location);
        map.setZoom(8);
    } else {
        map.setCenter(place.geometry.location);
        map.setZoom(8);
    }
    marker.setPosition(place.geometry.location);
    marker.setVisible(true);

}) ;

 var request = {
 location: options,
 radius: 8000,
 types:['cafe']
};


var service = new google.maps.places.PlacesService(map);

service.nearbySearch(request,callback);

}

function callback(results, status){
 if(status == google.maps.places.PlacesServiceStatus.OK){
     for(var i=0; i<results.length; i++){
         createrMarker(results[i]);
     }
 }
}

 function createrMarker(place){
 var placePos = place.geometry.location;
 var marker = new google.maps.Marker({
     map: map,
     position: place.geometry.location
 })
}

我希望它会用标记显示附近的搜索服务。

标签： javascriptgoogle-mapsgoogle-nearby

解决方案

您的主要问题是您的map变量是您的initMap函数的本地变量。要解决此问题，请var从该行的开头删除：

var map = new google.maps.Map(document.getElementById("map"), {

概念证明小提琴

代码片段：

var infowindow;
var service;

var marker;
var input;
var place;
var options;
var map;

function initMap() {
  var options = {
    lat: 53.3498,
    lng: -6.2603
  };

  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 8,
    center: options,
  });


  var input = document.getElementById('autocomplete');
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);

  var marker = new google.maps.Marker({
    position: options,
    map: map,
    label: "C",
    title: "place"
  });

  autocomplete.addListener('place_changed', function() {
    marker.setVisible(false);
    place = autocomplete.getPlace();

    if (place) {
      // map.fitBounds(placeselected.geometry.viewport);
      map.setCenter(place.geometry.location);
      marker.setPosition(place.geometry.location);
      marker.setVisible(true);
      map.setZoom(8);
      var request = {
        location: place.geometry.location,
        radius: 8000,
        types: ['cafe']
      };

      var service = new google.maps.places.PlacesService(map);

      service.nearbySearch(request, callback);

    } else {
      map.setCenter(options);
      map.setZoom(8);
    }
  });
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createrMarker(results[i]);
    }
  }
}

function createrMarker(place) {
  var placePos = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    title: place.name
  })
}
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map,
.map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#description {
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
}

#infowindow-content .title {
  font-weight: bold;
}

#infowindow-content {
  display: none;
}

#map #infowindow-content {
  display: inline;
}

.pac-card {
  margin: 10px 10px 0 0;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  font-family: Roboto;
}

#pac-container {
  padding-bottom: 12px;
  margin-right: 12px;
}

.pac-controls {
  display: inline-block;
  padding: 5px 11px;
}

.pac-controls label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}

#pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 400px;
}

#pac-input:focus {
  border-color: #4d90fe;
}

#title {
  color: #fff;
  background-color: #4d90fe;
  font-size: 25px;
  font-weight: 500;
  padding: 6px 12px;
}
<input id="autocomplete" type="text" placeholder="Enter City">
<div class="map">
  <div id="map"></div>
</div>
<!-- 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=initMap" async defer></script>

推荐阅读