javascript - 多个谷歌地点请求功能(药房定位器)

Question

我有一个小型的 Google map javascript v3 商店定位器，我用它来显示大约 5 家商店的位置 - 我的问题是，是否有比使用 5 个单独的窗口更智能的方法来发出地点请求和信息窗口，例如所以:

  //places request #1
        //place ID for first location
        servicedcd.getDetails({placeId: 'ChIJy_YmBMEMIocRZF8r5wPFMYU'}, 
            function(place, status) {
                if (status === google.maps.places.PlacesServiceStatus.OK) {
                        var marker = new google.maps.Marker({
                         map: map,
                        position: place.geometry.location,
                        icon: 'img/pillicon.jpg'});
                    targetLoc = place.geometry.location;
                    google.maps.event.addListener(marker, 'click', function() {
                         dcdLoc = place.geometry.location;
                        infowindow.setContent('<div><strong class="dmap-title">' + place.name + '</strong></div><br>' +
                        '<div class="dmap-address">' + place.formatted_address + '</div>' +
                        '<div class="dmap-phone">' + place.formatted_phone_number + '</div>' +
                        '<div class="dmap-rating">' + place.rating + '</div>' +                                  
                        '<button onClick="getDirNew(dcdLoc);"><h3>Directions to ' + place.name + '</h3></button>' + 
                        '<a href="' + place.website + '"><h4>Website</h4></a>' + 
                        + 'Place ID: ' + place.place_id + '<br>' +
                        place.formatted_address + '</div>');
                        infowindow.open(map, this);
                        console.log('new dcd geo loc: ' + place.geometry.location);
                    });
                }
          });



//places request #2
            //place ID for second location
            servicedcd.getDetails({placeId: 'ChIJy_YmBMEMIocRZF8r5wPFMYU'}, 
                function(place, status) {
                    if (status === google.maps.places.PlacesServiceStatus.OK) {
                            var marker = new google.maps.Marker({
                             map: map,
                            position: place.geometry.location,
                            icon: 'img/pillicon.jpg'});
                        targetLoc = place.geometry.location;
                        google.maps.event.addListener(marker, 'click', function() {
                             dcdLoc = place.geometry.location;
                            infowindow.setContent('<div><strong class="dmap-title">' + place.name + '</strong></div><br>' +
                            '<div class="dmap-address">' + place.formatted_address + '</div>' +
                            '<div class="dmap-phone">' + place.formatted_phone_number + '</div>' +
                            '<div class="dmap-rating">' + place.rating + '</div>' +                                  
                            '<button onClick="getDirNew(dcdLoc);"><h3>Directions to ' + place.name + '</h3></button>' + 
                            '<a href="' + place.website + '"><h4>Website</h4></a>' + 
                            + 'Place ID: ' + place.place_id + '<br>' +
                            place.formatted_address + '</div>');
                            infowindow.open(map, this);
                            console.log('new dcd geo loc: ' + place.geometry.location);
                        });
                    }
              });

等等。我知道这样不好。我已经在 AWS 上进行了测试，网址为

http://52.10.135.217/

如果有人愿意看一下并给我建议

非常感谢

Answer 1

您当前有一个匿名函数，您将其作为第二个参数传递给 servicedcd.getDetails:

但是，您可以做的是将其创建为单独的函数，然后只需按名称传递即可，例如

function addMarker(place, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
            var marker = new google.maps.Marker({
             map: map,
            position: place.geometry.location,
            icon: 'img/pillicon.jpg'});
        targetLoc = place.geometry.location;
        google.maps.event.addListener(marker, 'click', function() {
             dcdLoc = place.geometry.location;
            infowindow.setContent('<div><strong class="dmap-title">' + place.name + '</strong></div><br>' +
            '<div class="dmap-address">' + place.formatted_address + '</div>' +
            '<div class="dmap-phone">' + place.formatted_phone_number + '</div>' +
            '<div class="dmap-rating">' + place.rating + '</div>' +                                  
            '<button onClick="getDirNew(dcdLoc);"><h3>Directions to ' + place.name + '</h3></button>' + 
            '<a href="' + place.website + '"><h4>Website</h4></a>' + 
            + 'Place ID: ' + place.place_id + '<br>' +
            place.formatted_address + '</div>');
            infowindow.open(map, this);
            console.log('new dcd geo loc: ' + place.geometry.location);
        });
    }
}

servicedcd.getDetails({placeId: 'ChIJy_YmBMEMIocRZF8r5wPFMYU'}, addMarker);

如果唯一不同的是地点 ID，您可以将它们放入循环的数组中:

placeIDs = [
    'ChIJy_YmBMEMIocRZF8r5wPFMYU',
    'ID 2',
    'ID 3'
];

for (var i = 0; i < placeIDs.length; i++) {
    servicedcd.getDetails({placeId: placeIDs[i]}, addMarker);
}