如何使用Google Maps API定义多个位置，从而为循环生成的帖子列表中的每个帖子添加图钉 [英] How to define multiple locations Using Google Maps API to drop pin for every post in a list of posts generated by a loop

问题描述

这个问题可能会在其他帖子中得到回答，但是我还没有找到具体的答案，而且我在辨别如何从逻辑上思考问题时遇到了麻烦.我有一个网站，每个帖子都有一个地址.在每个帖子页面上，我都使用Google Maps API将地址转换为地图位置，并在该地址处显示带有图钉的地图.效果很好.

This question might be answered in other posts, but I haven't found the specific answer and I'm having trouble discerning how to logically think through this. I have a site where each post has an address. On each post page I've used the Google Maps API to translate the address into a map location and to show a map with a pin at that address. Works great.

我现在要做的是在存档/类别/等页面(包含由查询和循环生成的帖子列表的页面)的顶部显示地图，并为显示的每个帖子列出一个图钉在该特定查询中.我还需要地图自动调整大小以显示所有引脚，而不是在引脚边界之外显示无关的地图.

What I need to do now is to show a map at the top of my archive/category/etc pages (pages with a list of posts generated by a query and a loop) and to list a pin for every post that shows up in that particular query. I also need the map to automatically resize to show all of the pins, and not show extraneous map outside of the pins boundaries.

似乎会发生这种情况的方式是，我可以使用循环内的脚本来创建标记，以便每次循环运行时，它将生成一个新的标记并将其添加到地图中.

The way it seems that this would happen is that I could create the markers with a script that's inside the loop, so that each time the loop runs, it would generate a new marker and add it to the map.

似乎有潜力的另一种可能方法是，在每次循环时将位置添加到阵列中，然后在完成循环时显示引脚阵列.

Another possible method that seems like it has potential would be to add the location to an array for each turn of the loop, and then show the array of pins when the loop is done.

任何人都可以给我一些有关如何完成此操作的建议吗?此时，我正在使用以下代码，该代码为我提供了地图以及该循环生成的列表中最后一个帖子的位置.这段代码不在循环中.我需要知道我应该在循环内移动哪一部分，以及如何对其进行调整，以使我不会在循环的每次迭代期间都简单地重写标记.

Can anyone give me some advice on how to accomplish this? At this point I'm using the following code which gives me a map and the location of the last post in the list generated by the loop. This code is outside of the loop. I need to know which part I should move inside the loop, and how to adjust it so that I won't simply rewrite the marker during every iteration of the loop.

<script type="text/javascript">
    function initialize() {
        geocoder = new google.maps.Geocoder();
        var mapOptions = {
            zoom: 3,
        }
        var myAddress = document.getElementById('theAddress');
        var address = myAddress.textContent;
        geocoder.geocode({
            'address': address
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,

                });


            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });

        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

推荐答案

您需要在循环中添加标记.这是我正在做的一个项目.

You need to add markers in a loop. this was taken from a project i was working.

var locations = ["Denver, CO, United States"];
var markers = [];
var iterator = 0;

for (var i = 0; i < locations.length; i++) {
    setTimeout(function() {
            geocoder.geocode({'address': locations[iterator]}, function(results, status){
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                animation: google.maps.Animation.DROP
            });
            bounds.extend(marker.getPosition());
            map.fitBounds(bounds);
        } else {
            log('Geocode was not successful for the following reason: ' + status);
        }
    });
    iterator++;

    }, i * 250);
}

这篇关于如何使用Google Maps API定义多个位置，从而为循环生成的帖子列表中的每个帖子添加图钉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！