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

所以，我在周围找到了一些说明和一些似乎能回答这个问题的问题，但没有一个真正适合我，或者是非常不完整的。我正在寻找一种方式来显示传统的谷歌地图互动的搜索和pin显示在地图上的位置。那么，这个标记应该是一个空白选项，以包含用户想要的数据和保存到我的数据库中的位置。我尝试了这个示例，它可以在地图上进行自定义单击，但是与简单的或甚至是。

---

我想知道是否有一个插件或技术（或教程）适合这种情况（我以前认为这是一个简单的问题，因为这是谷歌地图上的传统搜索）。谢谢

我不知道你到底在找什么。 如果您正在查找在用户输入一些字符串并在地图上打开带有表单的信息窗口后向地图添加标记的“自动完成”字段，则可能类似于： 需要注意的是，此示例仅在用户从“自动完成”中选择一个建议时才在地图上放置标记。要允许他输入任意字符串，您必须查看输入以返回，并自己使用google maps geocoder（）

---

我可以向您展示我是如何完成此页面的，您可以轻松地将所有字段合并到一个自动完成的地址字段中。然而，这应该给你一个想法

首先，创建一个函数：

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();

---

你能提供一个JSFIDLE吗。出了什么问题？谢谢你的评论，@alkis！GoogleAPI页面上的说明适用于其中一个需求，但不能同时满足这两个需求。我设法获得了一个（不如我希望的那样好）自动完成功能，在另一个页面中，我获得了自定义标记添加功能，以保存在数据库中。但当我把它们放在一起时，它们最终会刹车。我找不到一个地方，也找不到坐标，无法在数据库中保存pin。我想试着打个盹，但这周我有点忙！再次感谢

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();