Google Maps JavaScript API v3: 多个地方的getDetails(request, callback)

Question

我已经实施 Google Maps JavaScript API v3 来为我公司的网站设计自定义商店定位器。首先让我说一下，我的代码适用于 two 商店，但如果我添加任何更多商店，它就不会有效或不可行，因为使用了 "hacky" 代码让它发挥作用。

我正在使用 Google Maps Places Library 通过 getDetails() 方法向 Google 发送 "place details" 请求。在回调中，我收到了每个商店位置的 InfoWindow 信息 （名称、地址、位置）。

我为每个地方创建一个标记，然后使用google.maps.event.addListener 来协调Place、Marker 和InfoWindow 对象。 这是我遇到问题的地方。地点详细信息请求的接收顺序并不总是与发送顺序相同，这会影响我的按钮索引data-marker 属性分别设置为 0 和 1，以关联地图标记。

有没有办法将第二个请求延迟到第一个请求完成？或者以保持顺序完整性的方式编写脚本？

下面的第一段代码是我的事件处理程序，它使用标记的 .place.placeId 属性而不是 将 click 侦听器绑定到每个按钮使用 markers 数组索引的首选技术（markers 数组包含两个商店的 地点详细信息）。

None Google 地图 API 文档（地点库）中的演示或示例描述了多个地点的过程。任何提示、资源或建议将不胜感激

Website: http://m.alliancepointe.com/locate.html

事件处理器

 $(".loc-btn").on('click', function () {
        var me = $(this).data('marker');
        var place1 = markers[0].place.placeId;
        var myIndex = me == place1 ? 0 : 1;
        google.maps.event.trigger(markers[myIndex], 'click');
    });

完整 JS

var markers = [];
var map;
var infowindow;
var service;

function initialize() {
    var index;
    var daddr;
    var idVA = 'ChIJKezXgqmxt4kRXrAnqIwIutA';
    var geoVA = '38.80407,-77.062881/Alliance+Pointe,+LLC';

    var idDC = 'ChIJDQlqOLG3t4kRqDU3uNoy4hs';
    var geoDC = '38.90188,-77.049161/Alliance+Pointe,+LLC';

    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        center: {lat: 38.90188, lng: -77.049161},
        zoom: 10,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
    };

    map = new google.maps.Map(document.getElementById('map'),
        mapOptions);

    var request = [
        {placeId: idVA, location: {lat: 38.80407, lng: -77.062881}},
        {placeId: idDC, location: {lat: 38.90188, lng: -77.049161}}
    ];

    var office = [
        "Main Office",
        "Principal Office"
    ];

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

    for (var i = 0; i < request.length; i++) {

        service.getDetails(request[i], function (placeResult, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                var id = placeResult.place_id;
                var location = placeResult.geometry.location;
                var trimAddr = placeResult.formatted_address.split(", ");

                var image = {
                    url: 'images/icons/AP-marker_large.png',
                    scaledSize: new google.maps.Size(32, 54)
                };
                var marker = new google.maps.Marker({
                    map: map,
                    place: {
                        placeId: id,
                        location: location
                    },
                    icon: image,
                    title: "Get directions"
                });

                google.maps.event.addListener(marker, 'click', function () {
                    if (id == idVA) {
                        index = 0;
                        daddr = geoVA;
                        trimAddr[0] = "1940 Duke St #200";
                    } else {
                        index = 1;
                        daddr = geoDC;
                        trimAddr[0] = "2200 Pennsylvannia Ave NW";
                    }
                    infowindow.setContent('<div class="info-window title">' + placeResult.name + "</div><div class='info-window sub-title'>" + office[index] + '</div><div class="info-window">' + trimAddr[0] + '<br>' + trimAddr[1] + ", " + trimAddr[2] + '</div><div class="info-window direction-div"><div class="direction-icon"></div><a class="google-link save-button-link" target="_blank" href="https://www.google.com/maps/dir/Current+Location/' + daddr + '">Get Directions</a></div>');
                    infowindow.open(map, marker);
                });

                markers.push(marker);
                //bounds.extend(location);
            }
        });
    }

    if (!bounds.isEmpty()) {
        map.fitBounds(bounds);
    }

    $(".loc-btn").on('click', function () {
        var me = $(this).data('marker');
        var place1 = markers[0].place.placeId;
        var myIndex = me == place1 ? 0 : 1;
        google.maps.event.trigger(markers[myIndex], 'click');

        //console.log("PlaceId = " + me);
        //console.log("Adj index = " + myIndex);
        //console.log("0:VA array index = " + markers[0].place.placeId);
        //console.log("1:DC array index = " + markers[1].place.placeId);
    });

    google.maps.event.addListenerOnce(map, 'idle', function () {
        $.mobile.loading("hide");
        $(".loc-btn").prop("disabled",false);
    });

}
google.maps.event.addDomListener(window, 'load', initialize);

HTML：地图和按钮

<div data-role="content" class="full-width">

        <figure id="map"></figure>

        <div class="loc-btn-set">
            <button disabled data-role="none" data-theme="a" data-marker="ChIJKezXgqmxt4kRXrAnqIwIutA" class="loc-btn nightly-button">VA <span>- Alexandria</span></button>
            <button disabled data-role="none" data-theme="b" data-marker="ChIJDQlqOLG3t4kRqDU3uNoy4hs" class="loc-btn nightly-button">DC <span>- Washington</span></button>
        </div>
    </div>

Answer 1

基于给定代码的最简单方法是在 getDetails-回调中为按钮添加点击处理程序。

在marker创建后添加：

            $('.loc-btn[data-marker="'+id+'"]').click(function(){
              google.maps.event.trigger(marker,'click');
            });

Google Maps JavaScript API v3: 多个地方的getDetails(request, callback)

Google Maps JavaScript API v3: getDetails(request, callback) for multiple places

javascript

json

google-maps

request

google-maps-api-3