簡體   English   中英

從附近搜索獲取PlaceID並顯示在標記InfoWindow(JS Google Maps API)中

[英]Get PlaceID from nearbySearch and display in a marker InfoWindow ( JS Google Maps API )

我有這個查詢

var service = new google.maps.places.PlacesService(map);
var request = {
  location: currentLocation,
  radius: '4828.03',
  type: ['workout gyms']
};
service.nearbySearch(request, callback);

而且我能夠在每個位置成功放置一個標記,但是我想使該標記可單擊,以使其在單擊時在infoWindow中顯示placeID。 有人知道我該怎么做嗎?

修改后的相關問題代碼: 地點附近搜索並未回調所有元素(返回地點詳細信息)

function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    console.log("nearbySearch returned " + results.length + " results")
    for (var i = 0; i < results.length; i++) {
      // make a marker for each "place" in the result
      createMarker(results[i]);
    }
  } else console.log("error: status=" + status);
}


function createMarker(place) {
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });
  google.maps.event.addListener(marker, 'click', function() {
    // display the place "name" and "place_id" in the infowindow.
    infowindow.setContent(place.name + "<br>" + place.place_id);
    infowindow.open(map, this);
  });
}

改良的小提琴

生成的地圖的屏幕截圖

代碼段:

 function initMap() { var lng; var lat; var my_loc = new google.maps.LatLng(37.4419, -122.1419); map = new google.maps.Map(document.getElementById('map'), { center: my_loc, zoom: 10 }); geocoder = new google.maps.Geocoder(); infowindow = new google.maps.InfoWindow(); service = new google.maps.places.PlacesService(map); var request = { location: map.getCenter(), radius: 4828.03, type: ['workout gyms'] }; service.nearbySearch(request, callback); } function callback(results, status) { if (status === google.maps.places.PlacesServiceStatus.OK) { console.log("nearbySearch returned " + results.length + " results") for (var i = 0; i < results.length; i++) { var id = results[i].place_id; createMarker(results[i]); } } else console.log("error: status=" + status); } function createMarker(place) { console.log("adding place " + place.name + " loc=" + place.geometry.location.toUrlValue(6)); var placeLoc = place.geometry.location; var marker = new google.maps.Marker({ map: map, position: place.geometry.location }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(place.name + "<br>" + place.place_id); infowindow.open(map, this); }); } google.maps.event.addDomListener(window, "load", initMap); 
 html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px } 
 <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> <div id="map"></div> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM