Question

我正在我的cordova应用程序中加载google map，并且我需要在Google map中集成地点搜索自动完成功能

我是cordova平台的新手，关于google maps APIs的信息很少。我已经加载了google map并在其上标记了一些标记以及用户当前的位置。但是我需要在位置搜索中实现autocomplete。我已经尝试过Google地方搜索places-searchbox

我的loadMap.html是：

 <div class="col s1 m1 l1">
            <i class="material-icons" style="position: fixed;left: 8px;top: 70px;font-weight: bold;"
                onclick="window.history.back()">arrow_back</i>
        </div>

        <div class="col s7 m8 l8">
            <input type="text" name="" id="placeSearchInput">
        </div>

        <div class="col">
            <a id="viewNearByROs" style="position: fixed; top: 60px;right: 2px;float: right; display: none;"
                class="btn waves-effect auto-button-align waves-red modal-trigger" href="#nearestInfoModal">Near to you
            </a>
        </div>

我的loadMap.js文件

function initializeGMap(lat, lng) {
myLatlng = new plugin.google.maps.LatLng(parseFloat(lat), parseFloat(lng));


var myOptions = {
    'camera': {
        'target': {
            lat: lat,
            lng: lng
        },
        'tilt': 30,
        'zoom': 11.5,
        'bearing': 50
    },
};
map = plugin.google.maps.Map.getMap(map_canvas, myOptions);

map.on(plugin.google.maps.event.MAP_READY, function () {
    map.addMarkerCluster({
        boundsDraw: false,
        markers: createMarkers(),
        icons: [
            { min: 2, max: 100, url: "/img/marker_map.png", anchor: { x: 160, y: 160 } },
            { min: 100, max: 1000, url: "/img/marker_map.png", anchor: { x: 16, y: 16 } },
            { min: 1000, max: 2000, url: "/img/marker_map.png", anchor: { x: 24, y: 24 } },
            { min: 2000, url: "/img/marker_map.png", anchor: { x: 32, y: 32 } }
        ]
    }, (markerCluster) => {
        markerCluster.on(plugin.google.maps.event.MARKER_CLICK, (position, marker) => {
            $('#stationName').text(marker.get("name"));
            $('#stationLocation').text(marker.get("location"));
            $('#stationId').val(marker.get("id"))
            if (marker.get("status") == 1) {
                $('#stationStatus').text('Active');
            } else {
                $('#stationStatus').text('Inactive');
            }
            cordova.fireDocumentEvent('plugin_touch', {});
            $('#MapInfoModal').show();
        });
    });
});
map.one(plugin.google.maps.event.MAP_READY, function () {
    var onSuccess = function (location) {
        var msg = "You're here";
        currentLat = location.latLng.lat;
        currentLng = location.latLng.lng;

        localStorage.setItem("currentLat", location.latLng.lat);
        localStorage.setItem("currentLng", location.latLng.lng);

        showNearestROs();
        map.addMarker({
            'position': location.latLng,
            'title': msg
        }, function (marker) {
            marker.showInfoWindow();
            map.animateCamera({
                target: location.latLng,
                zoom: 16
            }, function () {
                // marker.showInfoWindow();
            });
        });
    };

    var onError = function (msg) {

    };


    var options = {
        enableHighAccuracy: true  // Set true if you want to use GPS. Otherwise, use network.
    };
    map.getMyLocation(options, onSuccess, onError);
});

此后，我添加了place-search中的代码以获取位置建议

    function initAutocomplete() {
        // Create the search box and link it to the UI element.
        var input = document.getElementById('placeSearchInput');
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

        // Bias the SearchBox results towards current map's viewport.
        map.addListener('bounds_changed', function () {
            searchBox.setBounds(map.getBounds());
        });

        var markers = [];
        // Listen for the event fired when the user selects a prediction and retrieve
        // more details for that place.
        searchBox.addListener('places_changed', function () {
            var places = searchBox.getPlaces();

            if (places.length == 0) {
                return;
            }

            // Clear out the old markers.
            markers.forEach(function (marker) {
                marker.setMap(null);
            });
            markers = [];

            // For each place, get the icon, name and location.
            var bounds = new google.maps.LatLngBounds();
            places.forEach(function (place) {
                if (!place.geometry) {
                    console.log("Returned place contains no geometry");
                    return;
                }
                var icon = {
                    url: place.icon,
                    size: new google.maps.Size(71, 71),
                    origin: new google.maps.Point(0, 0),
                    anchor: new google.maps.Point(17, 34),
                    scaledSize: new google.maps.Size(25, 25)
                };

                // Create a marker for each place.
                markers.push(new google.maps.Marker({
                    map: map,
                    icon: icon,
                    title: place.name,
                    position: place.geometry.location
                }));

                if (place.geometry.viewport) {
                    // Only geocodes have viewport.
                    bounds.union(place.geometry.viewport);
                } else {
                    bounds.extend(place.geometry.location);
                }
            });
            map.fitBounds(bounds);
        });

    }

但是在搜索框中键入我没有任何结果

在Google地图中自动完成地点搜索中的科尔多瓦

0 个答案: