是否可以将地图中可拖动标记的纬度和经度（使用 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?是否可以将地图中可拖动标记的纬度和经度（使用 javascript）转换为 HTML 表单？
【发布时间】：2015-01-25 04:46:36
【问题描述】：

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

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

        function initialize() {
        var $latitude = document.getElementById('latitude');
        var $longitude = document.getElementById('longitude');
        var latitude = 50.715591133433854
        var longitude = -3.53485107421875;
        var zoom = 16;
        var geocoder;

        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
        }   

        var map = new google.maps.Map(document.getElementById('map'),mapOptions);

        geocoder = new google.maps.Geocoder();  

        var 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();
        });


    }
    $(document).ready(function () {

        initialize();

        $('#findbutton').click(function (e) {
            var address = $(PostCodeid).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();
        });
    });

【问题讨论】：

您的问题中没有使用地理编码器的代码。你试过什么没用？
我不知道如何在不破坏此代码的情况下实现地理编码器。我有另一个页面，我在给定地址中放置了一个标记，但我无法获取 lat 和 lng。
您可以发布添加地理编码器的最佳尝试。此时您的问题的答案是 (1.) 添加 google.maps.Geocoder。 (2.) 使用提供的地址调用它，使用返回的坐标在地图上放置一个标记。
您的 HTML 中没有文本字段可将地址放入...
我已经更新了问题，尝试添加地理编码器。

标签： google-maps latitude-longitude google-geocoder

【解决方案1】：

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

工作sn-p：

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></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>

【讨论】：

那将是另一个问题。你包括地方图书馆吗？