如何使用Google Maps geocoder.getLatLng（）并将其结果存储在数据库中？

Question

大家好！我试图使用getLatLng（）来对邮政编码列表进行地理编码，并将生成的点存储在数据库中，以便稍后将其放置在地图上。这是我到目前为止有：

$(".geocodethis").click(function() { 
    var geocoder = new GClientGeocoder(); 
    var postalCode = $(this).siblings(".postal").val(); 
    var id = $(this).siblings(".id").val(); 

    geocoder.getLatLng(postalCode, function (point) { 
     if (!point) { 
      alert(postalCode + " not found"); 
     } else { 
      alert(point); 
      var serializedPoint = $.param(point);     
      //Geocode(id, point); 
     } 
    }); 

}); 

function Geocode(id, point) { 
    alert(point); 
    $.post("/Demographic/Geocode/" + id, point, function() { 
     alert("success?"); 
    }); 
} 

，但我发现我的错误控制台this.lat is not a function当我试图序列点对象或使用它$.post()

从我的研究，我明白了geocoder.getLatLng()是异步的，这将如何影响我正在尝试做什么？我没有在循环中运行这段代码，我试图使用匿名回调函数发布该点。

如何将point的信息保存到以后使用？

更新

创建一个标记，并尝试后仍然导致this.lat is not a function错误控制台。

$(".geocodethis").click(function() { 
     var geocoder = new GClientGeocoder(); 
     var postalCode = $(this).siblings(".postal").val(); 
     var id = $(this).siblings(".id").val(); 

     geocoder.getLatLng(postalCode, function (point) { 
      if (!point) { 
       alert(postalCode + " not found"); 
      } else { 
       alert(point); 
       var marker = new GMarker(point); 

       $.post("/Demographic/Geocode/" + id, marker, function() { 
        alert("success?"); 
       }); 
      } 
     }); 

    }); 

**另一个更新**

我真的需要保存地理编码地址后，即使我存储在我的数据库中纬度/经度值和重拍标记时，我已经准备好了把它放到地图上。再次，序列化或发布 - 似乎在谷歌地图功能以外的任何方式使用该点在我的错误日志中给出this.lat is not a function例外。

我使用的是asp.net mvc - 有没有任何框架可以让这更简单？我真的需要帮助。谢谢。

Answer 1

如果你坚持2天，也许一个新的V3开始将是一个很好的事情，这个文档片断做了similair为我工作...

  function GetLocation(address) { 
      var geocoder = new google.maps.Geocoder(); 
      geocoder.geocode({ 'address': address }, function (results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        ParseLocation(results[0].geometry.location); 

       } 
       else 
       alert('error: ' + status); 

      }); 
     } 

    } 

    function ParseLocation(location) { 

     var lat = location.lat().toString().substr(0, 12); 
     var lng = location.lng().toString().substr(0, 12); 

     //use $.get to save the lat lng in the database 
     $.get('MatchLatLang.ashx?action=setlatlong&lat=' + lat + '&lng=' + lng, 
      function (data) { 
       // fill textboss (feedback purposes only) 
       //with the found and saved lat lng values 
       $('#tbxlat').val(lat); 
       $('#tbxlng').val(lng); 
       $('#spnstatus').text(data); 


      }); 
    } 

Answer 2

你需要在地图上设置一个标记，这需要一个经纬度。无论您想要还是立即显示，都可以保存该信息。 （代码截断演示目的）

map = new google.maps.Map(document.getElementById("Map"), myOptions); 
geocoder.geocode({ 'address': address }, function (results, status) { 
    if (status == google.maps.GeocoderStatus.OK) {  
     var marker = new google.maps.Marker({ 
      position: results[0].geometry.location 
     }); 
     marker.setMap(map); 
    } 
} 

更新版（V2）

$(".geocodethis").click(function() { 
    var geocoder = new GClientGeocoder(); 
    var postalCode = $(this).siblings(".postal").val(); 
    var id = $(this).siblings(".id").val(); 

    geocoder.getLatLng(postalCode, function (point) { 
     if (!point) { 
      alert(postalCode + " not found"); 
     } else { 
      map.setCenter(point, 13); 
      var marker = new GMarker(point); 
      map.addOverlay(marker); 
     } 
    }); 

}); 

Answer 3

你试过吗？

$(".geocodethis").click(function() { 
    var geocoder = new GClientGeocoder(); 
    var postalCode = $(this).siblings(".postal").val(); 
    var id = $(this).siblings(".id").val(); 

    geocoder.getLatLng(postalCode, function (point) { 
     if (!point) { 
      alert(postalCode + " not found"); 
     } else { 
      alert(point); 
      var marker = new GMarker(point); 
      map.addOverlay(marker); 
      obj = {lat: marker.position.lat(), 
        lng: marker.position.lng()}; 
      $.post("/Demographic/Geocode/" + id, obj, function() { 
       alert("success?"); 
      }); 
     } 
    }); 

}); 

我没有使用V2在很长一段时间，所以我不知道确切的语法，但关键是创建你所需要的信息（纬度/经度）的对象和序列化那。

此外，如果可能，建议升级到V3。

Answer 4

在V3中，坐标必须首先作为字符串序列化，如Arnoldiuss所示，然后再发送为json发布数据。

var lat = latlong.lat（）。toString（）。substr（0，12）; var lng = latlong.lng（）。toString（）。substr（0，12）;

Answer 5

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 

<%@ taglib prefix="s" uri="/struts-tags"%> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyDS1d1116agOa2pD9gpCuvRDgqMcCYcNa8&sensor=false"></script> 
<script type="text/javascript"> 
function initialize() { 

    var latitude = document.getElementById("latitude").value; 
    latitude = latitude.split(","); 

    var longitude = document.getElementById("longitude").value; 
    longitude = longitude.split(","); 

    var locName = document.getElementById("locName").value; 
    locName = locName.split(","); 

    var RoadPathCoordinates = new Array(); 
    RoadPathCoordinates.length = locName.length; 

    var locations = new Array(); 
    locations.length = locName.length; 

    var infowindow    = new google.maps.InfoWindow(); 
    var marker, i; 
    var myLatLng    = new google.maps.LatLng(22.727622,75.895719); 



    var mapOptions = { 
     zoom   : 16, 
     center   : myLatLng, 
     mapTypeId  : google.maps.MapTypeId.ROADMAP 
    }; 
    var map      = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 


    //To Draw a line 
    for (i = 0; i < RoadPathCoordinates.length; i++) 
     RoadPathCoordinates[i] = new google.maps.LatLng(latitude[i],longitude[i]); 
    var RoadPath = new google.maps.Polyline({ 
     path   : RoadPathCoordinates, 
     strokeColor  : "#FF0000", 
     strokeOpacity : 1.0, 
     strokeWeight : 2 
    }); 


    //Adding Marker to given points 
    for (i = 0; i < locations.length; i++) 
     locations[i] = [locName[i],latitude[i],longitude[i],i+1]; 
    for (i = 0; i < locations.length; i++) 
    {marker = new google.maps.Marker({ 
       position : new google.maps.LatLng(locations[i][1], locations[i][2]), 
       map   : map 
       }); 



    //Adding click event to show Popup Menu 
    var LocAddress =""; 
    google.maps.event.addListener(marker, 'click', (function(marker, i) 
     { return function() 
     { 
      GetAddresss(i); 

      //infowindow.setContent(locations[i][0]); 

      infowindow.setContent(LocAddress); 
      infowindow.open(map, marker); 
     } 
     })(marker, i));} 


function GetAddresss(MarkerPos){ 
     var geocoder = null; 
     var latlng; 
     latlng = new google.maps.LatLng(latitude[MarkerPos],longitude[MarkerPos]); 
     LocAddress = "91, BAIKUNTHDHAAM"; //Intializing just to test 

     //geocoder = new GClientGeocoder(); //not working 
     geocoder = new google.maps.Geocoder(); 

     geocoder.getLocations(latlng,function() 
     { 
      alert(LocAddress); 
      if (!response || response.Status.code != 200) { 
       alert("Status Code:" + response.Status.code); 
      } else 
      { 
       place = response.Placemark[0]; 
       LocAddress = place.address; 
      } 

     }); 
} 

    //Setting up path 
    RoadPath.setMap(map); 
} 
</script> 

</head> 
<body onload="initialize()"> 
    <s:form action="mapCls" namespace="/"> 
     <s:hidden key="latitude" id="latitude"/> 
     <s:hidden key="longitude" id="longitude"/> 
     <s:hidden key="locName" id="locName"/> 
     <div id="map_canvas" style="float:left;width:70%;height:100%"></div> 
    </s:form> 
</body> 
</html> 


I am doing reverse Geocoding, and want address of marker using lat and longitude. M facing problem with function "GetAddresss()", line "geocoder.getLocations(latlng,function()" is not working properly. what should I Do?