是否有可能在地图中使用JavaScript将可拖动标记的经度和纬度转换为HTML格式的表单？

本文介绍了是否有可能在地图中使用JavaScript将可拖动标记的经度和纬度转换为HTML格式的表单？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试获取Google地图中可拖动标记的纬度和经度。我需要这个值直接进入< input type =text> 中的value属性。我设法做到这一点，唯一的问题是我不知道如何添加一个地理编码器，以便用户可以输入自己的地址并获取经纬度，但是他们还需要将标记拖入谷歌地图的情况并不准确。我会把我的代码放在这里。

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 =textid =latitudeplaceholder =latitude> < input type =textid =longitudeplaceholder =longitude> < div id =mapstyle =width：500px; height：500px>< / div> < p>< input class =postcodeid =Postcodename =Postcodetype =text> < input type =submitid =findbuttonvalue =Find/>< / p> < / body>

JavaScript

 函数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！'，
可拖动：true 
}）; 
 
 google.maps.event.addListener（marker，'dragend'，function（marker）{
 var latLng = marker.latLng; 
 $ latitude.value = latLng.lat （）; 
 $ longitude.value = latLng.lng（）; 
}）; 
 
 
 $ b $（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不成功：+ status; 
} 
}）; 
 e.preventDefault（）; 
}）; 
}）;

解决方案

添加google。 maps.Geocoder。

用提供的地址调用它，使用返回的坐标在地图上放置一个标记。

获取该标记的坐标。 >

工作片段：

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

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

解决方案

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>

这篇关于是否有可能在地图中使用JavaScript将可拖动标记的经度和纬度转换为HTML格式的表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！