是否有可能将地图中的可拖动标记（使用javascript）的纬度和经度转换为HTML格式？(Is it possible to get the latitude and longitude of a

是否有可能将地图中的可拖动标记（使用javascript）的纬度和经度转换为HTML格式？(Is it possible to get the latitude and longitude of a draggable marker in a map (using javascript) into a form in HTML?)

我想在谷歌地图中获取可拖动标记的纬度和经度。我需要这些值直接进入<input type="text">的value属性。我设法做到这一点，唯一的问题是我不知道如何添加地理编码器，以便用户可以键入自己的地址并获取lat和lng，但他们也需要将标记拖入案例谷歌地图不准确。我会把我的代码放在这里。感谢是否有人可以提供帮助。

HTML

<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> </head> <body> <input type="text" id="latitude" placeholder="latitude"> <input type="text" id="longitude" placeholder="longitude"> <div id="map" style="width:500px; height:500px"></div> <p><input class="postcode" id="Postcode" name="Postcode" type="text"> <input type="submit" id="findbutton" value="Find" /></p> </body> </html>

JavaScript的

I am trying to obtain the Latitude and longitude of a draggable marker in google maps. I need this values to go directly into the value attribute in an <input type="text">. I've managed to do this, the only problem is that I don't know how to add a geocoder so the user can type their own address and get the lat and lng, but they also need to be albe to drag the marker in case google maps isn't accurate. I'll put my code down here. Appreciate if anyone could help.

HTML

JavaScript

最满意答案

添加google.maps.Geocoder。使用提供的地址调用它，使用返回的坐标在地图上放置标记。获取该标记的坐标

工作片段：

var geocoder = new google.maps.Geocoder();
var marker = null;
var map = null;
function initialize() {
      var $latitude = document.getElementById('latitude');
      var $longitude = document.getElementById('longitude');
      var latitude = 50.715591133433854
      var longitude = -3.53485107421875;
      var zoom = 16;

      var LatLng = new google.maps.LatLng(latitude, longitude);

      var mapOptions = {
        zoom: zoom,
        center: LatLng,
        panControl: false,
        zoomControl: false,
        scaleControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      map = new google.maps.Map(document.getElementById('map'), mapOptions);
      if (marker && marker.getMap) marker.setMap(map);
      marker = new google.maps.Marker({
        position: LatLng,
        map: map,
        title: 'Drag Me!',
        draggable: true
      });

      google.maps.event.addListener(marker, 'dragend', function(marker) {
        var latLng = marker.latLng;
        $latitude.value = latLng.lat();
        $longitude.value = latLng.lng();
      });


    }
    initialize();
    $('#findbutton').click(function (e) {
        var address = $("#Postcode").val();
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                marker.setPosition(results[0].geometry.location);
                $(latitude).val(marker.getPosition().lat());
                $(longitude).val(marker.getPosition().lng());
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
        e.preventDefault();
    }); 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <input type="text" id="latitude" placeholder="latitude">
    <input type="text" id="longitude" placeholder="longitude">
    <div id="map" style="width:500px; height:500px"></div>
    <p><input class="postcode" id="Postcode" name="Postcode" type="text" value="New York, NY">
    <input type="submit" id="findbutton" value="Find" /></p> 
  
 
 
 add the google.maps.Geocoder.  
 call it with the address provided, using the returned coordinates to place a marker on the map. 
 get the coordinates of that marker 
 
working snippet: 
 
 
  
  var geocoder = new google.maps.Geocoder();
var marker = null;
var map = null;
function initialize() {
      var $latitude = document.getElementById('latitude');
      var $longitude = document.getElementById('longitude');
      var latitude = 50.715591133433854
      var longitude = -3.53485107421875;
      var zoom = 16;

      var LatLng = new google.maps.LatLng(latitude, longitude);

      var mapOptions = {
        zoom: zoom,
        center: LatLng,
        panControl: false,
        zoomControl: false,
        scaleControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      map = new google.maps.Map(document.getElementById('map'), mapOptions);
      if (marker && marker.getMap) marker.setMap(map);
      marker = new google.maps.Marker({
        position: LatLng,
        map: map,
        title: 'Drag Me!',
        draggable: true
      });

      google.maps.event.addListener(marker, 'dragend', function(marker) {
        var latLng = marker.latLng;
        $latitude.value = latLng.lat();
        $longitude.value = latLng.lng();
      });


    }
    initialize();
    $('#findbutton').click(function (e) {
        var address = $("#Postcode").val();
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                marker.setPosition(results[0].geometry.location);
                $(latitude).val(marker.getPosition().lat());
                $(longitude).val(marker.getPosition().lng());
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
        e.preventDefault();
    }); 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <input type="text" id="latitude" placeholder="latitude">
    <input type="text" id="longitude" placeholder="longitude">
    <div id="map" style="width:500px; height:500px"></div>
    <p><input class="postcode" id="Postcode" name="Postcode" type="text" value="New York, NY">
    <input type="submit" id="findbutton" value="Find" /></p>

更多推荐