Question

我正在使用谷歌地图，其中我有拖动标记和搜索功能。标记被正确拖动但搜索没有执行。

这是我的工作代码：

<html>
<head>
<style type="text/css">
    #map_canvas {
        height: 450px;
        width: auto;
    }

    #pac-input {
        background-color: #fff;
        padding: 0 11px 0 13px;
        width: 400px;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        text-overflow: ellipsis;
    }

        #pac-input:focus {
            border-color: #4d90fe;
            margin-left: -1px;
            padding-left: 14px; /* Regular padding-left + 1. */
            width: 401px;
        }

    .pac-container {
        font-family: Roboto;
    }

    .controls {
        margin-top: 16px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }
</style>
    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript"
                src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&sensor=false"></script>
        <script>

             function initialize() {
                    var userLatLng;
                    var mapDiv = document.getElementById('map_canvas');
                    var Latitude = document.getElementById('Latitude');
                    var Longitude = document.getElementById('Longitude');
                    if (Latitude != null || Longitude != null) {
                        userLatLng = new google.maps.LatLng(document.getElementById("Latitude").value, document.getElementById("Longitude").value);
                    }
                    else {
                        userLatLng = new google.maps.LatLng(37.790234970864, -122.39031314844);
                    }

                    var map = new google.maps.Map(mapDiv, {
                        center: userLatLng,
                        zoom: 3,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    });

                    var marker = new google.maps.Marker({
                        position: userLatLng,
                        map: map,
                        title: 'Default Marker',
                        draggable: true
                    });

                    google.maps.event.addListener(marker, 'drag', function (event) {
                        document.getElementById('Latitude').value = event.latLng.lat();
                        document.getElementById('Longitude').value = event.latLng.lng();
                    });

                    google.maps.event.addListener(marker, 'dragend', function (event) {
                        document.getElementById('Latitude').value = event.latLng.lat();
                        document.getElementById('Longitude').value = event.latLng.lng();
                    });

                    // Create the search box and link it to the UI element.
                    var input = (document.getElementById('pac-input'));
                    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

                    var searchBox = new google.maps.places.SearchBox((input));

                    // [START region_getplaces]
                    // Listen for the event fired when the user selects an item from the
                    // pick list. Retrieve the matching places for that item.
                    google.maps.event.addListener(searchBox, 'places_changed', function () {
                        var places = searchBox.getPlaces();

                        if (places.length == 0) {
                            return;
                        }
                        for (var i = 0, marker; marker = markers[i]; i++) {
                            marker.setMap(null);
                        }

                        // For each place, get the icon, place name, and location.
                        markers = [];
                        var bounds = new google.maps.LatLngBounds();
                        for (var i = 0, place; place = places[i]; i++) {
                            var image = {
                                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.
                            var marker1 = new google.maps.Marker({
                                map: map,
                                draggable: true,
                                title: place.name,
                                position: place.geometry.location
                            });

                            latitude = marker1.getPosition().lat();
                            longitude = marker1.getPosition().lng();

                            markers.push(marker1);

                            bounds.extend(place.geometry.location);
                        }
                        map.fitBounds(bounds);

                    });

                    google.maps.event.addListener(map, 'bounds_changed', function () {
                        var bounds = map.getBounds();
                        searchBox.setBounds(bounds);
                    });
                    return true;
                }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
   </head>
<body>
    <div id="map_canvas"></div>
        <input id="pac-input" class="controls" type="text" placeholder="Search Box">
</body>
</html>

请建议为什么searchbox不能正常工作而且不能扩展。错误不会产生。

Answer 1

我得到了答案！

for（var i = 0，marker; marker = markers [i]; i ++）{

写在下面

for（var i = 0，markers; markers = marker [i]; i ++）{

Searchbox无法在Google地图中使用

1 个答案: