Как отображать два текстовых поля в один

-1

Я этот код карты Google с значениями координатКак отображать два текстовых поля в один

вопросы, как мы можем объединить текстовое поле 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>

источник

2015-10-12 Sia7h

мы надеемся получить быстрый ответ – Sia7h

Плата увеличивается за быстрые ответы. – lintmouse

Попробуйте этот код:

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

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

источник

2015-10-12 18:39:53 Sandeep

Большое вам спасибо, ваш код работал отлично, – Sia7h

решение простое, использовать метод .toUrlValue в виде google.maps.LatLng

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>

источник

2015-10-12 18:47:37 geocodezip

Как отображать два текстовых поля в один

ответ

Смежные вопросы