谷歌用文本框映射坐标

google maps mapping the coordinates with textboxes

本文关键字：映射 坐标 文本 谷歌      更新时间：2023-09-26

如果我在名为start和end的文本框中为lat-long值指定方向的坐标，并单击提交按钮，下面的代码就可以正常工作。

<script>
function initMap() {
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        center: {lat: 41.85, lng: -87.65}
    });
    directionsDisplay.setMap(map);
    document.getElementById('submit').addEventListener('click', function() {
        calculateAndDisplayRoute(directionsService, directionsDisplay);
    });
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    directionsService.route({
        origin: document.getElementById('start').value,
        destination: document.getElementById('end').value,
        travelMode: google.maps.TravelMode.DRIVING
    },
    function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}
</script>

当我点击地图上的位置时，我想得到文本框中的坐标。我有点击地图获取coodrinates的代码。

google.maps.event.addListener(map, 'click', function (e) {
    document.getElementById('latitude').value = e.latLng.lat();
    document.getElementById('longitude').value = e.latLng.lng();
});

但我发现很难将点击绘制为可接受的开始和结束。当用户第一次点击地图时，必须填充开始的文本框。当他再次点击时，必须填充结束的文本框。稍后，如果他只想更改端点，我将如何将他的点击映射到与端点对应的文本框？？请帮助

如果我假设是正确的，那么当你点击地图时，你想要的是lat-long，

尝试低于

var map;
var geocoder;
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
                  mapTypeId: google.maps.MapTypeId.ROADMAP };
function initMap() {
  var myOptions = {
    center: new google.maps.LatLng(41.85, -85.61),
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  geocoder = new google.maps.Geocoder();
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);
  google.maps.event.addListener(map, 'click', function(event) {
    getLocation(event.latLng);
  });
  var marker;
  function getLocation(location) {
    
    document.getElementById('lat').value=location.lat();
    document.getElementById('lng').value=location.lng();
    getAddress(location);
  }
  function getAddress(latLng) {
    geocoder.geocode( {'latLng': latLng},
                     function(results, status) {
      if(status == google.maps.GeocoderStatus.OK) {
        if(results[0]) {
          document.getElementById("address").value = results[0].formatted_address;
        }
        else {
          document.getElementById("address").value = "No results";
        }
      }
      else {
        document.getElementById("address").value = status;
      }
    });
  }
}
google.maps.event.addDomListener(window, 'load', initMap);
html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script><input type="text" id="address" size="30"><br><input type="text" id="lat" size="10"><input type="text" id="lng" size="10">
    <div id="map_canvas"></div>

我增加了额外的功能，它也会告诉你地址。希望这对你有帮助！

相关文章：