谷歌地图API地理位置文本搜索地点详细信息

Google Maps API Geolocation Text Search Place Details

本文关键字:搜索 置文本 详细信息 位置 API 谷歌地图      更新时间:2023-09-26

我使用谷歌地图api地理位置通过latlng获取用户位置,然后使用该位置在该区域周围搜索"高尔夫"位置。现在,我想从这个基本的地图/标记视图中前进,以便在用户单击特定的地图标记时提供位置详细信息。问题是当我点击标记时没有任何响应。我觉得我是一个变量,但真的需要一些帮助来确定为什么细节&infowindo点击失败?

我还看到谷歌正在使用placeID来返回详细信息?但不确定这是否适用于地图API细节请求。

提前感谢您的帮助。

function success(position) {
    var s = document.querySelector('#status');
    if (s.className == 'success') {
        // not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back    
        return;
    }
    s.innerHTML = "found you!";
    s.className = 'success';
    var mapcanvas = document.createElement('div');
    mapcanvas.id = 'mapcanvas';
    mapcanvas.style.height = '400px';
    mapcanvas.style.width = '560px';
    document.querySelector('article').appendChild(mapcanvas);
    var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeControl: false,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
    var service;
    var infowindow;
    var request = {
        location: latlng,
        radius: '3200',
        query: 'golf'
    };
		
    infowindow = new google.maps.InfoWindow();
    service = new google.maps.places.PlacesService(map);
    service.textSearch(request, callback);
    function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
                //var place = results[i];
                createMarker(results[i].geometry.location);
            }
        }
    }
function createMarker(position) {
    new google.maps.Marker({
        position: position,
        map: map
    });
 }
var request = { reference: position.reference };
    service.getDetails(request, function(details, status) {
marker.addListener(marker, 'click', function() {
    infowindow.setContent(details.name);
    infowindow.open(map, this);
  });
  });
  }
function error(msg) {
    var s = document.querySelector('#status');
    s.innerHTML = typeof msg == 'string' ? msg : "failed";
    s.className = 'fail';
}
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, error);
} else {
    error('not supported');
}
html, body, #mapcanvas {
    height: 400px;
    width: 400px;
    margin: 0px;
    padding: 0px
}
<article>
    <p>Finding your location: <span id="status">checking...</span>
    </p>
</article>

我在这里看到了两个可能的问题:

var request = { reference: position.reference };
service.getDetails(request, function(details, status) {
  1. 这里,positionLatLng,它不具有reference属性。所以您的getDetails呼叫失败
  2. 传递给getDetails的回调函数会忽略status,因此您永远不会注意到它报告的任何错误

综合起来,这就是为什么什么都没发生。

修复:将整个PlaceResult(即results[i],而不是results[i].geometry.location)传递给createMarker,这样您就可以访问位置和位置ID。

顺便说一句:不赞成使用reference。请改用placeId