Javascript Google places API在地图上放置多个标记，并缩放到大多数标记所在的位置

首先，我想向你们展示我已经尝试过的解决方案，这样你们也不会使用它们：

因为我在这些地方有以下循环：

service.textSearch({query:query}, function(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        //for each result in results.length ++
        for (var i = 0; i < results.length; i++) {
            //here I'm just setting the names from the variables into a list, to display the names as I show in (Figure 1).
            var item = document.createElement('li');
            item.appendChild(document.createTextNode(results[i].name));
            document.getElementById('results').appendChild(item);

            //here I set my variables that are necessary for the markers to work
            p_id[i] = results[i].place_id;

            lat[i] = results[i].geometry.location.lat();
            lng[i] = results[i].geometry.location.lng();

            //here I initialize the map with the given values.
            initMap(p_id, lat, lng, i);
        }
    }
});

奇怪的是，如果只有一个地方，那么会出现一个标记，但是当他们有更多的地方，那么就根本没有标记。。。如图2所示

---

图2：

---

如果有人有任何线索来解决它，请告诉他们。虽然我已经找了一段时间了，但我似乎自己也没办法弄明白。我试图制作一个JSFIDLE，但遗憾的是API无法在JSFIDLE上运行

---

编辑：

利用遗传算法解决了多标记问题。问题是我已经怀疑我一直在创建多个地图

我只需将

maps

从

mapinit

函数中移出，然后将其放置在

getPlaces

函数中的

服务

上方，如下所示：

var map = new google.maps.Map(document.getElementById('map'), {
    center: latlng,
    zoom: 5
});

service = new google.maps.places.PlacesService(
  document.getElementById('attributions') //attributions-container
);

//send a query
service.textSearch({query:query}, function(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
            var item = document.createElement('li');
            item.appendChild(document.createTextNode(results[i].name));
            document.getElementById('results').appendChild(item);

            p_id[i] = results[i].place_id;

            lat[i] = results[i].geometry.location.lat();
            lng[i] = results[i].geometry.location.lng();

            initMap(p_id, lat, lng, i, map);
        }
    }
});

已经提前谢谢了

---

请仔细阅读我的评论。我可能错过了一些东西，我在工作中很忙。我简化了很多代码，删除了一些额外的服务调用等

编辑：我添加了一个地图边界变量，用于设置放置标记后的地图缩放和中心

编辑2：我添加了一个Google Maps回调函数，以消除让您无法访问

Google

命名空间的竞争条件。确保更换您的API密钥

首先，将实际贴图初始化移出循环：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

<script>
    var startLatLng, //change this to some value near to where the map will end up
        allMarkers = [], //keep a global copy of your markers
        mapPointsBounds = [], //map bounds of all markers
        map; //copy of the map

    //Google will call this when it's ready, it's a query string in the script tag above `&callback=initMap`:
    function initMap() {
        startLatLng = new google.maps.LatLng([0, 0]);
        mapPointsBounds = new google.maps.LatLngBounds();

        map = new google.maps.Map(document.getElementById('map'), {
            center: startLatLng,
            zoom: 13
        });

        service.textSearch({query:query}, function(results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                //for each result in results.length ++
                for (var i = 0; i < results.length; i++) {
                    //here I'm just setting the names from the variables into a list, to display the names as I show in (Figure 1).
                    var item = document.createElement('li');
                    item.appendChild(document.createTextNode(results[i].name));
                    document.getElementById('results').appendChild(item);

                    //let's just send the object, this is unnecessary:
                    //here I set my variables that are necessary for the markers to work
                    //p_id[i] = results[i].place_id;
                    //lat[i] = results[i].geometry.location.lat();
                    //lng[i] = results[i].geometry.location.lng();

                    //Change this function name to "addMapMarker", send in the results object
                    addMapMarker(results[i], i);
                }

                //finally, fitBounds on map to set zoom and center:
                map.fitBounds(mapPointsBounds);
            }
        });
    }

    //I would change the name of this function to "addMapMarker" or something similar
    function addMapMarker(markerInfo, i) {
        //why are you initializing "i" again if you're passing it in?
        var infowindow = new google.maps.InfoWindow(), marker; //, i;
        var service = new google.maps.places.PlacesService(map);

        var marker;

        //gets the details of the placeid over again - why?  Why not send the info into the function?
        /* Is this really necessary again?
        service.getDetails({
            placeId: markerInfo.place_id
        }, function(place, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
        */
        //this is where the marker is created with position and animation
        marker = new google.maps.Marker({
            animation: google.maps.Animation.DROP,
            position: markerInfo.geometry.location,
            map: map,
            markerInfo: markerInfo //you can store anything in the map point
        });

        allMarkers.push(marker); //keeping all markers in an array
        mapPointsBounds.extend(markerInfo.geometry.location); //extend bounds to contain this marker


        //this is the info if you click the marker
        //you're running a function, then returning a function... just put a simple function here:
        google.maps.event.addListener(marker, 'click', function (marker, i) {
            //return function() {
            infowindow.setContent('<div><strong>' + marker.markerInfo.name + '</strong><br>' + 'Place ID: ' + marker.markerInfo.place_id + '<br>' + marker.markerInfo.formatted_address + '</div>');
            infowindow.open(map, marker);
            //}
        });
    }
</script>

var starttatlng，//将其更改为接近映射结束位置的某个值
allMarkers=[]，//保留标记的全局副本
mapPointsBounds=[]，//映射所有标记的边界
地图//地图副本
//谷歌会在准备好后调用它，它是`&callback=initMap`上面脚本标记中的一个查询字符串：
函数initMap（）{
starttatlng=newgoogle.maps.LatLng（[0,0]）；
mapPointsBounds=新的google.maps.LatLngBounds（）；
map=new google.maps.map（document.getElementById（'map'）{
中心：惊人，
缩放：13
});
textSearch（{query:query}，函数（结果，状态）{
if（status==google.maps.places.PlacesServiceStatus.OK）{
//对于results.length中的每个结果++
对于（var i=0；i”+marker.markerInfo.name+”“+”位置ID:“+marker.markerInfo.Place\u ID+”
”+marker.markerInfo.formatted\u address+”）；
信息窗口。打开（地图、标记）；
//}
});
}

请仔细阅读我的评论。我可能错过了一些东西，我在工作中很忙。我简化了你的许多代码，删除了一些额外的服务电话，等等

编辑：我添加了一个地图边界变量，用于设置放置标记后的地图缩放和中心

编辑2：我添加了一个Google Maps回调函数，以消除让您无法访问

Google

命名空间的竞争条件。请确保替换您的\u API\u密钥

首先，将实际贴图初始化移出循环：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

<script>
    var startLatLng, //change this to some value near to where the map will end up
        allMarkers = [], //keep a global copy of your markers
        mapPointsBounds = [], //map bounds of all markers
        map; //copy of the map

    //Google will call this when it's ready, it's a query string in the script tag above `&callback=initMap`:
    function initMap() {
        startLatLng = new google.maps.LatLng([0, 0]);
        mapPointsBounds = new google.maps.LatLngBounds();

        map = new google.maps.Map(document.getElementById('map'), {
            center: startLatLng,
            zoom: 13
        });

        service.textSearch({query:query}, function(results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                //for each result in results.length ++
                for (var i = 0; i < results.length; i++) {
                    //here I'm just setting the names from the variables into a list, to display the names as I show in (Figure 1).
                    var item = document.createElement('li');
                    item.appendChild(document.createTextNode(results[i].name));
                    document.getElementById('results').appendChild(item);

                    //let's just send the object, this is unnecessary:
                    //here I set my variables that are necessary for the markers to work
                    //p_id[i] = results[i].place_id;
                    //lat[i] = results[i].geometry.location.lat();
                    //lng[i] = results[i].geometry.location.lng();

                    //Change this function name to "addMapMarker", send in the results object
                    addMapMarker(results[i], i);
                }

                //finally, fitBounds on map to set zoom and center:
                map.fitBounds(mapPointsBounds);
            }
        });
    }

    //I would change the name of this function to "addMapMarker" or something similar
    function addMapMarker(markerInfo, i) {
        //why are you initializing "i" again if you're passing it in?
        var infowindow = new google.maps.InfoWindow(), marker; //, i;
        var service = new google.maps.places.PlacesService(map);

        var marker;

        //gets the details of the placeid over again - why?  Why not send the info into the function?
        /* Is this really necessary again?
        service.getDetails({
            placeId: markerInfo.place_id
        }, function(place, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
        */
        //this is where the marker is created with position and animation
        marker = new google.maps.Marker({
            animation: google.maps.Animation.DROP,
            position: markerInfo.geometry.location,
            map: map,
            markerInfo: markerInfo //you can store anything in the map point
        });

        allMarkers.push(marker); //keeping all markers in an array
        mapPointsBounds.extend(markerInfo.geometry.location); //extend bounds to contain this marker


        //this is the info if you click the marker
        //you're running a function, then returning a function... just put a simple function here:
        google.maps.event.addListener(marker, 'click', function (marker, i) {
            //return function() {
            infowindow.setContent('<div><strong>' + marker.markerInfo.name + '</strong><br>' + 'Place ID: ' + marker.markerInfo.place_id + '<br>' + marker.markerInfo.formatted_address + '</div>');
            infowindow.open(map, marker);
            //}
        });
    }
</script>

var starttatlng，//将其更改为接近映射结束位置的某个值
allMarkers=[]，//保留标记的全局副本
mapPointsBounds=[]，//映射边界
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

<script>
    var startLatLng, //change this to some value near to where the map will end up
        allMarkers = [], //keep a global copy of your markers
        mapPointsBounds = [], //map bounds of all markers
        map; //copy of the map

    //Google will call this when it's ready, it's a query string in the script tag above `&callback=initMap`:
    function initMap() {
        startLatLng = new google.maps.LatLng([0, 0]);
        mapPointsBounds = new google.maps.LatLngBounds();

        map = new google.maps.Map(document.getElementById('map'), {
            center: startLatLng,
            zoom: 13
        });

        service.textSearch({query:query}, function(results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                //for each result in results.length ++
                for (var i = 0; i < results.length; i++) {
                    //here I'm just setting the names from the variables into a list, to display the names as I show in (Figure 1).
                    var item = document.createElement('li');
                    item.appendChild(document.createTextNode(results[i].name));
                    document.getElementById('results').appendChild(item);

                    //let's just send the object, this is unnecessary:
                    //here I set my variables that are necessary for the markers to work
                    //p_id[i] = results[i].place_id;
                    //lat[i] = results[i].geometry.location.lat();
                    //lng[i] = results[i].geometry.location.lng();

                    //Change this function name to "addMapMarker", send in the results object
                    addMapMarker(results[i], i);
                }

                //finally, fitBounds on map to set zoom and center:
                map.fitBounds(mapPointsBounds);
            }
        });
    }

    //I would change the name of this function to "addMapMarker" or something similar
    function addMapMarker(markerInfo, i) {
        //why are you initializing "i" again if you're passing it in?
        var infowindow = new google.maps.InfoWindow(), marker; //, i;
        var service = new google.maps.places.PlacesService(map);

        var marker;

        //gets the details of the placeid over again - why?  Why not send the info into the function?
        /* Is this really necessary again?
        service.getDetails({
            placeId: markerInfo.place_id
        }, function(place, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
        */
        //this is where the marker is created with position and animation
        marker = new google.maps.Marker({
            animation: google.maps.Animation.DROP,
            position: markerInfo.geometry.location,
            map: map,
            markerInfo: markerInfo //you can store anything in the map point
        });

        allMarkers.push(marker); //keeping all markers in an array
        mapPointsBounds.extend(markerInfo.geometry.location); //extend bounds to contain this marker


        //this is the info if you click the marker
        //you're running a function, then returning a function... just put a simple function here:
        google.maps.event.addListener(marker, 'click', function (marker, i) {
            //return function() {
            infowindow.setContent('<div><strong>' + marker.markerInfo.name + '</strong><br>' + 'Place ID: ' + marker.markerInfo.place_id + '<br>' + marker.markerInfo.formatted_address + '</div>');
            infowindow.open(map, marker);
            //}
        });
    }
</script>