Question

所以，我找到了一些指示和一些似乎回答这个问题的问题，但没有一个对我有用或者非常不完整。我正在寻找一种方法来显示传统的谷歌地图搜索交互和一个图钉显示在该地点的地图上。然后，此标记应为空白选项，以包括用户想要的数据和保存到我的数据库的位置。我在Google Dev尝试了此示例，它可以在地图上进行自定义点击，但与简单auto-complete search甚至google's own autocomplete search的集成并不起作用。我想知道是否有适合这种情况的插件或技术（或教程）（我之前认为这将是一个简单的问题，因为它是谷歌地图上的传统搜索）。谢谢！

Answer 1

我不确定你究竟在寻找什么。如果您正在寻找自动填充字段，在用户输入一些字符串并在地图上打开带有表单的信息窗口后向地图添加标记，则可能是这样的：http://jsfiddle.net/XG9Qj/2/ 重要的是要注意，如果用户从自动完成中选择了一个建议，则此示例仅在地图上放置标记。要允许他输入任意字符串，您必须观看RETURN的输入并自行使用谷歌地图地理编码器（1）。

var geocoder = new google.maps.Geocoder();
geocoder.geocode(...)

Answer 2

我可以告诉您我是如何完成此页http://www.a-zhotels.net/register的，您可以轻松地将所有字段合并到一个自动填充地址字段中。但是，这应该会给你一个想法。

首先，创建一个函数：

function getMapByGeoLocation() {
    //build the address using many fields.
    var postcode = $("#HotelPostcode").val();
    var address = $("#HotelAddress").val();
    var town = $("#HotelTown").val();
    var city = $("#HotelCity").val();
    var country = $("#HotelCountryId > option:selected").text();

    var fulladdress = address + ', ' + town + ', ' + postcode + ', ' + city + ', ' + country;

    geocoder.geocode(
    {
        'address': fulladdress
    },
    function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var location = results[0].geometry.location;
            console.log(location);
            //map and marker should be previously created
            map.setCenter(location);
            map.setZoom(14);
            marker.setPosition(location);

            //These 2 hidden inputs will be posted to the server
            $("#HotelLatitude").val(location.Ya);
            $("#HotelLongitude").val(location.Za);

        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

当文本框和下拉列表发生变化时，将调用此函数：

$("#HotelTown, #HotelAddress, #HotelPostcode").change(getMapByGeoLocation);

见下面创建地图的功能：

var map;
var marker;
var geocoder;

function createMap() {
    if (map) { //Map already exists
        return;
    }
    if (!$('#mapCanvas').is(':visible')) {
        return;
    }
    var mapCanvas = $("#mapCanvas")[0];

    var averageLatitude = $("#HotelLatitude").val();
    var averageLongitude = $("#HotelLongitude").val();

    map = new google.maps.Map(mapCanvas, {
        streetViewControl: true,
        zoom: 13,
        scrollwheel: false,
        center: new google.maps.LatLng(averageLatitude, averageLongitude)
    });
    geocoder = new google.maps.Geocoder();

    //Associate the styled map with the MapTypeId and set it to display.
    map.setMapTypeId(google.maps.MapTypeId.ROADMAP);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(averageLatitude, averageLongitude),
        draggable: true,
        map: map
    });

    google.maps.event.addListener(marker, "dragend", function () {
        var position = marker.getPosition();
        map.panTo(position);
        $("#HotelLatitude").val(position.lat());
        $("#HotelLongitude").val(position.lng());
    });

    google.maps.event.addListener(map, "center_changed", function () {
        var position = map.getCenter();
        marker.setPosition(position);
        $("#HotelLatitude").val(position.lat());
        $("#HotelLongitude").val(position.lng());
    });
}

createMap();

通过搜索框添加Google Maps V3用户输入

2 个答案: