Question

我正在尝试在用户使用自动填充中的选项时显示地图..我必须选择一个位置两次才能显示正确的地图..以下是我的API v3代码...任何人都可以在代码中找到低于我可能做错了什么？

function initializeGoogleMap() {

    //var autocomplete = new google.maps.places.Autocomplete(input);
    //autocomplete.bindTo('bounds', map);

    //var infowindow = new google.maps.InfoWindow();
    //var marker = new google.maps.Marker({
    //    map: map,
    //    anchorPoint: new google.maps.Point(0, -29)
    //});




    var mapOptions = {
        center: new google.maps.LatLng(latitude, longitude),
        zoom: 13,
        styles: [{
            //featureType: "poi",
            elementType: "labels",
            stylers: [{
                visibility: "off"
            }]
        }],
        mapTypeControl: false
    };
    var map = new google.maps.Map(document.getElementById('fixturemap-canvas'),
      mapOptions);

    var input = /** @type {HTMLInputElement} */(
        document.getElementById('txtAddress'));

    var types = document.getElementById('type-selector');
    var options = {
        types: ['address']
    };

    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);

    autocomplete.setTypes(options.types);

    var infowindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
        map: map,
        anchorPoint: new google.maps.Point(0, -29)
    });

    google.maps.event.addListener(autocomplete, 'place_changed', function () {

        infowindow.close();
        marker.setVisible(false);
        var place = autocomplete.getPlace();
        if (!place.geometry) {
            return;
        }

        // If the place has a geometry, then present it on a map.
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);

            alert("came here 1 >" + place.geometry.viewport.longitude);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);  // Why 17? Because it looks good.
            alert("came here 2");
        }
        marker.setIcon(/** @type {google.maps.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(35, 35)
        }));
        marker.setPosition(place.geometry.location);
        marker.setVisible(true);

        var address = '';
        if (place.address_components) {
            address = [
              (place.address_components[0] && place.address_components[0].short_name || ''),
              (place.address_components[1] && place.address_components[1].short_name || ''),
              (place.address_components[2] && place.address_components[2].short_name || '')
            ].join(' ');
        }

        infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
        infowindow.open(map, marker);
    });
}

Answer 1

上面提供的代码片段工作正常，正如Dr.Molle在评论中指出的那样，它让我进一步调查在同一文本框txtAddress上有另一个onChange事件正在重置坐标。

<强>解决方案如果其他人遇到同样的问题，请检查您的代码，看看是否有覆盖地图数据的同一文本框上的onChange事件。

function initializeGoogleMap() {
 .... // Code Works Fine
}

Check Working Code Here

PS：在我的情况下，我无法发布我的整个JS文件，因为它太大了！所以我只能发布处理地图的主要代码段。

Google地图自动填充功能，从下拉列表中选择的选项不会在首次显示准确的位置

1 个答案: