3

So, I found some instructions around and a few questions that seemed to answer this question, but none really worked for me or were very incomplete. I'm seeking a way to display the traditional google maps interaction of search and a pin is displayed on the map at the location. This marker, then, should be a blank option to include the data a user wants and the location saved to my database. I tried this sample by Google Dev and it worked for a custom click on the map, but the integration with a simple auto-complete search or even the google's own autocomplete search didn't quite worked. I was wondering if there is a plugin or a technique (or a tutorial) that would suit this case (that I previously thought would be a simple matter as it is the traditional search on google maps). Thanks!

4

2 回答 2

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();
于 2013-05-20T22:26:39.457 回答
1

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

var geocoder = new google.maps.Geocoder();
geocoder.geocode(...)
于 2013-05-18T07:11:41.947 回答