繁体   English   中英

如何使用Google Maps javascript获取搜索结果标记的纬度,经度

[英]How to get latitude, longitude of search result marker with google maps javascript

我正在尝试获取标记的纬度,经度,该标记显示为可拖动的搜索结果,因此当用户移动作为我代码的标记时,我需要保持其更新纬度,经度

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>

没有一个有效的示例,我无法调试您的代码,但这是我相信您正在尝试做的事情的我自己的版本。

<!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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM