Fatal编程技术网
  • javascript/
  • 如何使用google maps javascript获取搜索结果标记的纬度、经度

如何使用google maps javascript获取搜索结果标记的纬度、经度

javascript google-maps

如何使用google maps javascript获取搜索结果标记的纬度、经度,javascript,google-maps,Javascript,Google Maps,我正在尝试获取显示为搜索结果的标记的纬度、经度。标记是可拖动的，所以当用户移动标记时，我需要保持它更新纬度、经度，这是我的代码 function initialize() { var markers = []; var map = new google.maps.Map(document.getElementById('map-canvas'), { mapTypeId: google.maps.MapTypeId.ROADMAP}); var defaultBounds = new

我正在尝试获取显示为搜索结果的标记的纬度、经度。标记是可拖动的，所以当用户移动标记时，我需要保持它更新纬度、经度，这是我的代码

function initialize() {

var markers = [];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP});

var defaultBounds = new google.maps.LatLngBounds(
   new google.maps.LatLng(-33.8902, 151.1759),
   new google.maps.LatLng(-33.8474, 151.2631));
   map.fitBounds(defaultBounds);

var input = (document.getElementById('pac-input'));

var searchBox = new google.maps.places.SearchBox((input));

google.maps.event.addListener(searchBox, 'places_changed', function() {
  var places = searchBox.getPlaces();

  markers = [];
var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
      var image = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25)};

map = new google.maps.Map(document.getElementById("map-canvas"));
    google.maps.event.addListener(map, 'click', function(event) {
      if (marker) {
         marker.setMap(null); 
         marker = null;}

document.getElementById('txtLat').value=event.latLng.lat();
document.getElementById('txtLng').value=event.latLng.lng();
var marker = new google.maps.Marker({
   animation: google.maps.Animation.DROP,
   map: map,
   title: place.name,
   draggable:true,
   position: place.geometry.location});
   markers.push(marker);

bounds.extend(place.geometry.location);}

map.fitBounds(bounds);});

google.maps.event.addListener(map, 'bounds_changed', function() {
   var bounds = map.getBounds();
   searchBox.setBounds(bounds);});}

google.maps.event.addDomListener(window, 'load', initialize);


  <input id="pac-input" class="controls" type="text" placeholder="Enter location">
  <div id="map-canvas"></div>

  <table >
   <tr><td><input type="text" id="txtLat" name="txtLat"style="width:150px"></td>
       <td><input type="text" id="txtLng" name="txtLng"style="width:150px"></td></tr>

  </table>

函数初始化（）{
var标记=[]；
var map=new google.maps.map（document.getElementById（'map-canvas'）{
mapTypeId:google.maps.mapTypeId.ROADMAP}）；
var defaultBounds=new google.maps.LatLngBounds(
新的google.maps.LatLng（-33.8902151.1759），
新的google.maps.LatLng（-33.8474151.2631））；
map.fitBounds（defaultBounds）；
var输入=（document.getElementById（'pac-input'）；
var searchBox=newgoogle.maps.places.searchBox（（输入））；
google.maps.event.addListener（搜索框，'places_changed'，函数（）{
var places=searchBox.getPlaces（）；
标记=[]；
var bounds=new google.maps.LatLngBounds（）；
for（var i=0，place；place=places[i]；i++）{
变量图像={
url:place.icon，
大小：新谷歌地图大小（71,71），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（17,34），
scaledSize:newgoogle.maps.Size（25,25）}；
map=新的google.maps.map（document.getElementById（“地图画布”）；
google.maps.event.addListener（映射，'click'，函数（事件）{
如果（标记）{
marker.setMap（空）；
marker=null；}
document.getElementById（'txtLat'）。value=event.latLng.lat（）；
document.getElementById（'txtLng'）。value=event.latLng.lng（）；
var marker=new google.maps.marker({
动画：google.maps.animation.DROP，
地图：地图，
标题：place.name，
真的，
位置：place.geometry.location}）；
标记器。推（标记器）；
bounds.extend（place.geometry.location）；}
fitBounds（bounds）；}）；
google.maps.event.addListener（映射'bounds_changed'，函数（）{
var bounds=map.getBounds（）；
searchBox.setBounds（边界）；}；}
google.maps.event.addDomListener（窗口“加载”，初始化）；

如果没有一个有效的示例，我无法调试您的代码，但以下是我自己的版本，我相信您正在尝试做的事情


<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <script src='http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false'></script>
  </head>
  <body>
    <h1>MapAPI</h1>
    <div id="mapCon" style='height:512px;width:512px;'></div>
    <div id='output'></div>
    <script>
    //the API key is used by w3schools, it remains only as an example

      //assign map values
      var mapVal={
        center:new google.maps.LatLng(38,-78),
        zoom:7,
        mapTypeId:google.maps.MapTypeId.ROADMAP
      };

      //assign marker values
      var mark=new google.maps.Marker({
        draggable:true,
        position:new google.maps.LatLng(38,-78)
      });

      //define and place map and marker
      map=new google.maps.Map(document.getElementById('mapCon'),mapVal);
      mark.setMap(map);

      //keep updating incase the marker is moved
      function update(){
        //get coordinates directly from the marker
        output.innerHTML='Latitude: '+mark.position.k+'<br>Longitude: '+mark.position.A;
        //try to update at 60fps, stop if the window isnt in focus
        requestAnimationFrame(update);
      }

    google.maps.event.addDomListener(window,'load',update);
    </script>
  </body>
</html>




MapAPI
//API密钥由W3学校使用，仅作为示例
//指定贴图值
var mapVal={
中心：新google.maps.LatLng（38，-78），
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
//指定标记值
var mark=new google.maps.Marker({
真的，
位置：新google.maps.LatLng（38，-78）
});
//定义并放置地图和标记
map=new google.maps.map（document.getElementById（'mapCon'），mapVal）；
mark.setMap（map）；
//保持更新，以防标记移动
函数更新（）{
//直接从标记获取坐标
output.innerHTML='Latitude:'+mark.position.k+'
经度：'+mark.position.A；
//尝试以60帧/秒的速度更新，如果窗口未聚焦，请停止
requestAnimationFrame（更新）；
}
google.maps.event.addDomListener（窗口，'load'，update）；

你的代码怎么了？你能解释一下吗？基本上，当我将map=new google.maps.map的部分添加到var marker=new google.maps.marker（{它甚至不显示地图