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

【问题标题】：Adding Google Maps V3 User input through a searchbox通过搜索框添加 Google Maps V3 用户输入
【发布时间】：2013-05-21 06:26:39
【问题描述】：

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

【问题讨论】：

你能提供一个jsfiddle吗？出了什么问题？
感谢@alkis 的评论！google api 页面上的说明适用于其中一项要求，但不能同时满足这两项要求。我设法获得了一个（不如我希望的那么好）自动完成功能，并且在另一个页面中我获得了自定义标记添加功能以保存在数据库中。但是当我把它们放在一起时，它们最终会刹车。我无法搜索一个地方并获得放置图钉的坐标并保存在我的数据库中。我会尝试做一个 jsfiddle，但是这周我有点忙！再次感谢

标签： google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

我可以向您展示我是如何制作此页面的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();

【讨论】：

【解决方案2】：

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

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

【讨论】：