Question

我正在使用google maps api geolocation通过latlng获取用户位置，然后使用此位置来搜索该区域周围的“高尔夫”位置。现在，我想从这个基本的地图/标记视图前进，以便在用户点击特定地图标记时提供地点详细信息。问题是当我点击标记时没有响应。我觉得我是一个变量，但可以真正使用一些帮助确定为什么细节＆amp; infowindo无法在点击时出现？

我还看到google使用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>

Answer 1

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

var request = { reference: position.reference };
service.getDetails(request, function(details, status) {

此处position是LatLng，其中没有reference属性。因此，getDetails来电失败。
您传递给getDetails的回调函数会忽略status，因此您从未注意到它报告的任何错误。

结合起来，这就是没有任何反应的原因。

修正：将整个PlaceResult（即results[i]，而非results[i].geometry.location）传递给createMarker，以便您可以同时访问该位置和地点ID。

暂且不赞成使用reference。请改用placeId。

Google Maps API地理位置文字搜索位置详细信息

1 个答案: