Question

我已经实施了Google Maps JavaScript API v3来为我公司的网站设计自定义商店定位器。首先让我说我已经为两个商店工作的代码，但是如果因为＆＃34; hacky＆＃34;而添加了更多的商店，它将不会有效或可行。用于使其工作的代码。

我正在使用Google地图位置库发送＆＃34;放置详细信息＆＃34;使用getDetails()方法向Google发出请求。在回调中，我收到了每个商店位置的InfoWindow信息（姓名，地址，位置）。

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

是否有延迟第二个请求直到第一个请求完成？或者以维持序数完整性的方式编写脚本？

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

Google Maps API文档（地方资料库）中的所有演示或示例均未描述多个地点的流程。任何提示，资源或建议都将非常感谢

网站：http://m.alliancepointe.com/locate.html

事件处理程序

markers

完整的JS

 $(".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');
    });

HTML：地图＆amp;按钮

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);

Answer 1

基于给定代码的最简单方法是为getDetails - 回调中的按钮添加点击处理程序。在创建marker后添加此代码：< / p>

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

Google Maps JavaScript API v3：针对多个地方的getDetails（请求，回调）

1 个答案: