通过搜索框添加谷歌地图V3用户输入

因此，我发现了一些有关周围的指令和几个似乎回答这个问题的问题，但没有一个真正适用于我或者非常不完整。我正在寻找一种方法来显示搜索的传统Google地图交互，并在地图上显示一个别针。然后，这个标记应该是一个空白选项，以包含用户需要的数据和保存到我的数据库的位置。我通过Google Dev尝试了这个示例，并且它可以在地图上自定义点击，但与简单的auto-complete search甚至google's own autocomplete search的集成并不完美。我想知道是否有插件或技术（或教程），将适合这种情况下（我以前认为将是一件简单的事情，因为它是谷歌地图上的传统搜索）。谢谢！通过搜索框添加谷歌地图V3用户输入

来源

2013-04-30 André Lucas

你能否提供一个jsfiddle。什么地方出了错？ – alkis 2013-05-14 08:52:30

感谢评论，@alkis！google api页面上的说明适用于其中一项要求，但不适用于两项要求。我设法得到一个（不是我想要的）自动完成功能，而在另一个页面中，我获得了自定义标记添加功能以保存在数据库中。但是当我把它们放在一起时，他们最终会刹车。我无法搜索一个地方，并获得坐标来把这个引脚也保存在我的数据库中。我会尽力做一个jsfiddle，但这周我有点忙！再次感谢 – 2013-05-14 18:31:07

我可以告诉你我是如何做到这页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-20 22:26:39

谢谢@卡洛斯！ – 2013-05-21 02:32:51

我不确定你到底在找什么。如果您正在寻找在用户输入一些字符串并在地图上打开带窗体的信息窗口之后向地图添加标记的自动填充字段，可能是这样的：http://jsfiddle.net/XG9Qj/2/ 请务必注意，此示例很重要如果用户从自动填充中选择了其中一项建议，则只会在地图上放置一个标记。为了让他输入一个任意的字符串，你必须观察RETURN的输入并自己使用谷歌地图地理编码器（1）。

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

来源

2013-05-18 07:11:41 MofX

通过搜索框添加谷歌地图V3用户输入

回答

相关问题