有没有办法在地图中获得10个以上的标记

Question

我试图在我当前的位置到达附近。我现在面临的问题是，我只能在地图上找回10个标记，它不再回馈地点，有没有办法绕过或解决这个问题，显然我在网上看到谷歌只限制你10个标记

googleMaps.js：

//Variable init
    var map;
    var infowindow;
    var service;
    var markers = [];
    //var myLatLng= new google.maps.LatLng(-33.8665433,151.1956316);

    //Dom init
    $('#details').hide();
    $('#gym').prop('checked', true);
    $('#park').prop('checked', true);
    $('#store').prop('checked', true);
    $('#museum').prop('checked', true);
    //$('#zoo').prop('checked', true);
    $('#cafe').prop('checked', true);

    //Function init
    geoLocationInit();

    //Google maps area
    function geoLocationInit() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(success, fail);
        } else {
            alert("Browser not supported");
        }
    }

    function success(position) {
        var latval = position.coords.latitude;
        var Ingval = position.coords.longitude;
        myLatLng = new google.maps.LatLng(latval, Ingval);
        initMap(myLatLng);
    }

    function fail() {
        alert("it fails");
    }

    function initMap(myLatLng) {
        map = new google.maps.Map(document.getElementById('map'), {
            center: myLatLng,
            zoom: 12
        });

        var request = {
            location: myLatLng,
            radius: 8047,
            types: ['cafe', 'gym', 'park', 'store', 'museum']
        };

        infowindow = new google.maps.InfoWindow();
        service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, callback);
        map.addListener('idle', performSearch);
    }




    function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
                addMaker(results[i]);
            }
        }
    }

    function addMaker(place) {
        service.getDetails({
            placeId: place.place_id
        }, function (place, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
                var marker = new google.maps.Marker({
                    name: place.name,
                    map: map,
                    position: place.geometry.location,
                    types: place.types
                });

                markers.push(marker);

                google.maps.event.addListener(marker, 'click', function () {
                    var review = [];
                    if (undefined !== place.reviews && place.reviews.length) {
                        for (var i = 0; i < place.reviews.length; i++) {
                            if (place.reviews[i].text) {
                                review.push('<b>Author Name:</b>&nbsp;' + place.reviews[i].author_name + '</br>' + '<b>Review:</b>&nbsp;' + place.reviews[i].text + '</br>');
                            }
                        }
                    } else {
                        review.push('Not Available');
                    }

                    infowindow.setContent(place.name);
                    infowindow.open(map, this);
                    $('#details').show();
                    $('#name').html(place.name);
                    $('#rating').html(place.rating + ' ' + 'Star(s)');
                    $('#address').html(place.adr_address);
                    $('#review').html(review);
                });
            }
        });
    }

    //Gym markers
    function gymMarkers() {
        markerType = '';
        var check = $('#gym').is(':checked');
        if (check) {
            for (var i = 0; i < markers.length; i++) {
                for (var j = 0; j < markers[i].types.length; j++) {
                    if (markers[i].types[j] == "gym") {
                        markers[i].setVisible(true);
                    }
                }
            }
        } else {
            for (var i = 0; i < markers.length; i++) {
                for (var j = 0; j < markers[i].types.length; j++) {
                    if (markers[i].types[j] == "gym") {
                        markers[i].setVisible(false);
                    }
                }
            }
        }
    }

    //Park markers
    function parkMarkers() {
        var check = $('#park').is(':checked');
        if (check) {
            for (var i = 0; i < markers.length; i++) {
                for (var j = 0; j < markers[i].types.length; j++) {
                    if (markers[i].types[j] == "park") {
                        markers[i].setVisible(true);
                    }
                }
            }
        } else {
            for (var i = 0; i < markers.length; i++) {
                for (var j = 0; j < markers[i].types.length; j++) {
                    if (markers[i].types[j] == "park") {
                        markers[i].setVisible(false);
                    }
                }
            }
        }
    }

    //Store markers
    function storeMarkers() {
        var check = $('#store').is(':checked');
        if (check) {
            for (var i = 0; i < markers.length; i++) {
                for (var j = 0; j < markers[i].types.length; j++) {
                    if (markers[i].types[j] == "store") {
                        markers[i].setVisible(true);
                    }
                }
            }
        } else {
            for (var i = 0; i < markers.length; i++) {
                for (var j = 0; j < markers[i].types.length; j++) {
                    if (markers[i].types[j] == "store") {
                        markers[i].setVisible(false);
                    }
                }
            }
        }
    }

    //Museum markers
    function museumMarkers() {
        var check = $('#museum').is(':checked');
        if (check) {
            for (var i = 0; i < markers.length; i++) {
                for (var j = 0; j < markers[i].types.length; j++) {
                    if (markers[i].types[j] == "museum") {
                        markers[i].setVisible(true);
                    }
                }
            }
        } else {
            for (var i = 0; i < markers.length; i++) {
                for (var j = 0; j < markers[i].types.length; j++) {
                    if (markers[i].types[j] == "museum") {
                        markers[i].setVisible(false);
                    }
                }
            }
        }
    }

    //Zoo markers
    // function zooMarkers() {
    //     var check = $('#zoo').is(':checked');
    //     if (check) {
    //         for (var i = 0; i < markers.length; i++) {
    //             for (var j = 0; j < markers[i].types.length; j++) {
    //                 if (markers[i].types[j] == "zoo") {
    //                     markers[i].setVisible(true);
    //                 }
    //             }
    //         }
    //     } else {
    //         for (var i = 0; i < markers.length; i++) {
    //             for (var j = 0; j < markers[i].types.length; j++) {
    //                 if (markers[i].types[j] == "zoo") {
    //                     markers[i].setVisible(false);
    //                 }
    //             }
    //         }
    //     }
    // }

    //Cafe markers
    function cafeMarkers() {
        var check = $('#cafe').is(':checked');
        if (check) {
            for (var i = 0; i < markers.length; i++) {
                for (var j = 0; j < markers[i].types.length; j++) {
                    if (markers[i].types[j] == "cafe") {
                        markers[i].setVisible(true);
                    }
                }
            }
        } else {
            for (var i = 0; i < markers.length; i++) {
                for (var j = 0; j < markers[i].types.length; j++) {
                    if (markers[i].types[j] == "cafe") {
                        markers[i].setVisible(false);
                    }
                }
            }
        }
    }

front.blade.php

@extends('layouts.master')

@section('content')


    <!-- This is a *view* - HTML markup that defines the appearance of your UI -->
    <div id='searchBar'>
        <p>Search: <strong data-bind="text: location"></strong></p>
        <p><input type='checkbox' onclick="gymMarkers();" id='gym'> Gyms </p>
        <p><input type='checkbox' onclick="parkMarkers();" id='park'>Parks </p>
        <p><input type='checkbox' onclick="storeMarkers();" id='store'> Stores </p>
        <p><input type='checkbox' onclick="museumMarkers();" id='museum'> Museums </p>
        <p><input type='checkbox' onclick="zooMarkers();" id='zoo'> Zoos </p>
        <p><input type='checkbox' onclick="cafeMarkers();" id='cafe'> cafe </p>
    </div>

    <div class="container">
        {{--Google maps--}}
        <div id="map"></div>

        {{--Cafe details--}}
        <div id="details" style="visibility:false">
            <table class="table table-bordered" style="width: 500px; margin-top: 10px;">
                <tr>
                    <td colspan="2" style="text-align: center;"><b>Description</b></td>
                </tr>
                <tr>
                    <td width="150">Name</td>
                    <td id="name"></td>
                </tr>
                <tr>
                    <td width="150">Rating</td>
                    <td id="rating"></td>
                </tr>
                <tr>
                    <td width="150">Address</td>
                    <td id="address"></td>
                </tr>
                <tr>
                    <td width="150">User Review</td>
                    <td id="review"></td>
                </tr>
            </table>
        </div>

        {{--Review--}}
        <div>
            <ul class="reviews"></ul>
        </div>
        {{--Example--}}
        <div>
            <ul class="example"></ul>
        </div>
    </div>

@endsection

Image of map

Answer 1

我可以看到您在JavaScript代码中使用搜索附近的地点。附近的搜索最多可以在3页内返回60个结果。 Places API Web服务文档说明如下：

  

默认情况下，每个附近搜索或文本搜索每个查询最多返回20个建立结果;但是，每个搜索可以返回多达60个结果，分为三个页面。如果您的搜索返回超过20，则搜索响应将包含一个附加值 - next_page_token。将next_page_token的值传递给新搜索的pagetoken参数，以查看下一组结果。

在Maps JavaScript API的地方库中，行为类似。 nearbySearch() [1]方法的回调函数返回类型PlaceSearchPagination [2]的第三个参数。分页具有属性hasNextPage，允许检查是否有更多结果。如果是这样，您可以调用分页nextPage()方法。

有一个示例演示了如何在附近的搜索中使用分页：

https://developers.google.com/maps/documentation/javascript/examples/place-search-pagination

另请注意，Places API不能用作数据库搜索，也不会返回所有结果。它仅返回指定区域的显着结果。谷歌如何决定哪些结果是显着的，哪些不是我不能说的。因此，如果您在第一页中获得少于20个结果，则表示Google无法在此区域找到20个显着结果。

我希望我的回答能澄清你的疑问。

[1] https://developers.google.com/maps/documentation/javascript/reference#PlacesService

[2] https://developers.google.com/maps/documentation/javascript/reference#PlaceSearchPagination