Question

我有这个谷歌地图代码，坐标值

问题是我们如何合并Lat＆amp; amp;的文本字段。只进入一个领域，

所以我们需要一个文本字段只显示协调（Lat，Lon）

任何人都可以提供帮助

代码在

之下

    <!DOCTYPE html>
<html>
  <head>

  </head>
  <body>






<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?

sensor=false"></script> 

   <br />
    Copy this number and past it in GPS field
   <br />



 <br />

<input id="divLon" type="text" /> 
<input id="divLat" type="text" />

        <br />

        <br />

     <div id="map_canvas" style="width: 600px; height: 600px;"></div>
        <script type="text/javascript">

            var marker;





 function initialize() {
                var lat;`enter code here`
                var lon;
                navigator.geolocation.getCurrentPosition(function (location) {
                    lat = location.coords.latitude;
                    lon = location.coords.longitude;

                    var city = new google.maps.LatLng(lat, lon);
                    var mapOptions = {
                        zoom: 15,
                        center: city,
mapTypeId: 
google.maps.MapTypeId.HYBRID
                    };
                    var map = new google.maps.Map(document.getElementById

("map_canvas"), mapOptions);

                    var image = "icon.png";
                    marker = new google.maps.Marker({
                                    position: city,
                                    map: map,
                                    draggable: true,
                                    icon: image
                    });

                    google.maps.event.addListener(marker, 'position_changed', 

function (event) {
                        update();
                    });

                   update();
                }, function (positionError) {
                    alert("getCurrentPosition failed: " + positionError.message);
                }, { enableHighAccuracy: true });
            };

            google.maps.event.addDomListener(window, "load", initialize);

            function update() {

                var lonlan = marker.getPosition();
                var divLon = document.getElementById ("divLon");
                var divLat = document.getElementById ("divLat");

                divLat.value = lonlan.lat ();                                       

        divLon.value = lonlan.lng ();
            }





    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfpx62iYkjhpz0J-

vu4Zz96vtWE2TFzQs&signed_in=true&callback=initMap"></script>
  </body>
</html>

Answer 1

试试这段代码：

function update() {
    var lonlan = marker.getPosition();
    var divLat = document.getElementById ("divLat");

    divLat.value = lonlan.lat ()+", "+lonlan.lng ();                                       
}

Answer 2

最简单的解决方案，使用google.maps.LatLng

的.toUrlValue方法

function update() {
  var lonlan = marker.getPosition();
  var divLatLon = document.getElementById("divLatLon");
  divLatLon.value = lonlan.toUrlValue(6);
}

代码段

var marker;

function initialize() {
  var lat;
  var lon;
  navigator.geolocation.getCurrentPosition(function(location) {
    lat = location.coords.latitude;
    lon = location.coords.longitude;

    var city = new google.maps.LatLng(lat, lon);
    var mapOptions = {
      zoom: 15,
      center: city,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };
    var map = new google.maps.Map(document.getElementById

      ("map_canvas"), mapOptions);

    var image = "icon.png";
    marker = new google.maps.Marker({
      position: city,
      map: map,
      draggable: true,
      icon: image
    });

    google.maps.event.addListener(marker, 'position_changed',

      function(event) {
        update();
      });

    update();
  }, function(positionError) {
    alert("getCurrentPosition failed: " + positionError.message);
  }, {
    enableHighAccuracy: true
  });
};

google.maps.event.addDomListener(window, "load", initialize);

function update() {

  var lonlan = marker.getPosition();
  var divLatLon = document.getElementById("divLatLon");
  divLatLon.value = lonlan.toUrlValue(6);

}

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="divLatLon" />
<div id="map_canvas"></div>

如何将两个文本字段显示为一个

2 个答案: