php - Google map API - 在单独的文本字段内显示可拖动标记 Lat 和 Lng

标签 php javascript html google-maps dom

我使用Google Maps example for Draggable markers 。现在我想在单独的文本字段中显示纬度和经度，当我将标记拖动到文本字段内时，显示的纬度和经度的值发生了变化(当用户停止拖动标记时，他能够在 MySQL 中插入纬度和经度 - 此插入部分对我来说不是问题)。

我知道我可以分离 Lat 和 Lng 值。

function updateMarkerPosition(latLng) {
  document.getElementById('info').innerHTML = [
    latLng.lat(),
    //latLng.lng()
  ].join(', ');
    document.getElementById('info2').innerHTML = [
    //latLng.lat(),
    latLng.lng()
  ].join(', ');
}

并按 id 在 div 内显示此值。

<div align="center" id="info"></div>
<div align="center" id="info2"></div>

但我不知道如何在 TextFields 中显示这些值，因此当我拖动标记时它会动态变化。

最好， 达科

最佳答案

我通过 geocodezip sugestion ( Retrieve latitude and longitude of a draggable pin via Google Maps API V3 ) 编辑代码，现在可以按照我想要的方式工作。完整代码如下所示。

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link href="Free-Camping/free_camping_style.css" rel="stylesheet" type="text/css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Free Camping</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
<!--
//<![CDATA[

    var customIcons = {

      "1": {
        icon: 'Free-Camping/markers/BeachCampingSite.png',
      },

      "2": {
        icon: 'Free-Camping/markers/BushCampingSite.png',
      },

      "3": {
        icon: 'Free-Camping/markers/ParkForestReserve.png',
      },

      "4": {
        icon: 'Free-Camping/markers/PrivateCampingSite.png',
      },

      "5": {
        icon: 'Free-Camping/markers/RoadsideRestArea.png',
      },

      "6": {
        icon: 'Free-Camping/markers/NewLocationMarker.png',
      }

    };


//*** Dragable Marker 1/3 - Start *** //
var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      updateMarkerAddress(responses[0].formatted_address);
    } else {
      updateMarkerAddress('Cannot determine address at this location.');
    }
  });
}

function updateMarkerStatus(str) {
  document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(latLng) {
  document.getElementById('info').value = [
    latLng.lat(),
    //latLng.lng()
  ].join(', ');
    document.getElementById('info2').value = [
    //latLng.lat(),
    latLng.lng()
  ].join(', ');
}

function updateMarkerAddress(str) {
  document.getElementById('address').innerHTML = str;
}
//*** Dragable Marker 1/3 - End *** //


    function load() {
      var latLng = new google.maps.LatLng(-25.878994,134.018553);

      geocoder = new google.maps.Geocoder();

      var map = new google.maps.Map(document.getElementById("map"), {
        center: latLng,
        zoom: 4,
        mapTypeId: 'roadmap'
      });

      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("free_camping_phpsql.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var category = markers[i].getAttribute("category");
          var name = markers[i].getAttribute("name");
          var street = markers[i].getAttribute("street");
          var locality = markers[i].getAttribute("locality");
          var description = markers[i].getAttribute("description");
          var image = markers[i].getAttribute("image");
          var toilet = markers[i].getAttribute("toilet");
          var bbq = markers[i].getAttribute("bbq");
          var able = markers[i].getAttribute("able");
          var tentok = markers[i].getAttribute("tentok");
          var caravanok = markers[i].getAttribute("caravanok");
          var dumppoint = markers[i].getAttribute("dumppoint");
          var shade = markers[i].getAttribute("shade");
          var water = markers[i].getAttribute("water");
          var swimming = markers[i].getAttribute("swimming");
          var fishing = markers[i].getAttribute("fishing");
          var hiking = markers[i].getAttribute("hiking");
          var mobileok = markers[i].getAttribute("mobileok");
          var name2 = markers[i].getAttribute("name2");
          var email = markers[i].getAttribute("email");
          var lat = markers[i].getAttribute("lat");
          var lng = markers[i].getAttribute("lng");

          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));

         var html = '<p style="font-family: calibri, corbel, verdana; color: #621c11; font-size: 18px; font-weight: bold; text-align: left">' + name + '</p>'  
         + '<p style="font-family: calibri, corbel, verdana; color: #621c11; font-size: 14px; text-align: left">' + street + '</br>' 
         + locality + '</br>'
         + lat + ', &nbsp;' + lng + '</p>' 

         + '<img src="Free-Camping/images/'+image+'" width=150; height=150;>' + '</br>'
         + '<a href="Free-Camping/images/'+image+'" target="_blank">(enlarge image)' + '</a>'
         + '<p style="font-family: calibri, corbel, verdana; color: #0f0f0f; font-size: 13px; text-align: left">' + description  + '</p>'

         // Checkbox
         + '<p style="font-family: calibri, corbel, verdana; color: #0f0f0f; font-size: 12px; text-align: left;">  Toilet: &nbsp;' + toilet + '<br>'  
         + 'BBQ: &nbsp;' + bbq + '<br>'   
         + 'Table: &nbsp;' + able + '<br>'  
         + 'Tent: &nbsp;' + tentok + '<br>'   
         + 'Caravan: &nbsp;' + caravanok + '<br>'  
         + 'Dumppoint: &nbsp;' + dumppoint + '<br>'  
         + 'Shade: &nbsp;' + shade + '<br>'   
         + 'Water: &nbsp;' + water + '<br>'   
         + 'Swimming: &nbsp;' + swimming + '<br>'  
         + 'Fishing: &nbsp;' + fishing + '<br>'   
         + 'Hiking: &nbsp;' + hiking + '<br>'   
         + 'Mobile: &nbsp;' + mobileok + '</p>';

          var icon = customIcons[category] || {};

          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
          });

           bindInfoWindow(marker, map, infoWindow, html); 
        }   

      //*** Dragable Marker 2/3 - Start *** //
      var marker2 = new google.maps.Marker({
      position: latLng,
      title: 'Point A',
      map: map,
      draggable: true
      });

     // Update current position info.
     updateMarkerPosition(latLng);
     geocodePosition(latLng);

    // Add dragging event listeners.
    google.maps.event.addListener(marker2, 'dragstart', function() {
    updateMarkerAddress('Dragging...');
    });

    google.maps.event.addListener(marker2, 'drag', function() {
    updateMarkerStatus('Dragging...');
    updateMarkerPosition(marker2.getPosition());
    });

    google.maps.event.addListener(marker2, 'dragend', function() {
    updateMarkerStatus('Drag ended');
    geocodePosition(marker2.getPosition());
    });
    //*** Dragable Marker 2/3 - End *** //

      }); 
    }


    //*** Dragable Marker 3/3 - Start *** //
    // Onload handler to fire off the app. 
    google.maps.event.addDomListener(window, 'load', load);
    //*** Dragable Marker 3/3 - End *** //


    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}


//]]>
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $('#submit').hover(
            function(){ // Change the input image's source when we "roll on"
                $(this).attr({ src : 'Free-Camping/images2/SubmitCampsiteButton_2.png'});
            },
            function(){ // Change the input image's source back to the default on "roll off"
                $(this).attr({ src : 'Free-Camping/images2/SubmitCampsiteButton_1.png'});                }
        );
    });
</script>

  </head>

<body onload="load();MM_preloadImages('Free-Camping/images2/MapCentreIcon_2.png','Free-Camping/images2/SubmitCampsiteButton_2.png')">

<div id="main_layer" style="position:absolute; left:50%; top:25px; width:788px; height:1800px; margin-left: -390px;">

<div id="map_layer" style="position:absolute; left:0px; top:0px; width:780px; height:595px;" class="map_frame">
<div id="map_centre_icon" style="position:absolute; top:11px; width:25px; height:25px; margin-left: 715px; "><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','Free-Camping/images2/MapCentreIcon_2.png',1)"><img src="Free-Camping/images2/MapCentreIcon_1.png" name="Image7" width="24" height="24" border="0" onclick="load();" ></a></div>
<div id="map" style="position:absolute; top:45px; width:760px; height:500px; margin-left: 10px; "></div>


<div id="legend" style="position:absolute; top:550px; width:760px; height:45px; margin-left: 10px;">

<div id="image Beach Camping Site" style="position:absolute; top:0px; width:32px; height:37px; margin-left: 10px;"><img src="Free-Camping/markers/BeachCampingSite.png" width="32" height="37">
</div>
<div id="text Beach Camping Site" style="position:absolute; top:7px; width:100px; height:15px; margin-left: 42px;"><span class="legend_text">Beach Camping Site</span>
</div>

<div id="image Bush Camping Site" style="position:absolute; top:0px; width:32px; height:37px; margin-left: 160px;"><img src="Free-Camping/markers/BushCampingSite.png" width="32" height="37">
</div>
<div id="text Bush Camping Site" style="position:absolute; top:7px; width:100px; height:15px; margin-left: 192px;"><span class="legend_text">Bush Camping Site</span>
</div>

<div id="image Park Forest Reserve" style="position:absolute; top:0px; width:32px; height:37px; margin-left: 310px;"><img src="Free-Camping/markers/ParkForestReserve.png" width="32" height="37">
</div>
<div id="text Park Forest Reserve" style="position:absolute; top:7px; width:100px; height:15px; margin-left: 342px;"><span class="legend_text">Park Forest Reserve</span>
</div>

<div id="image Private CampingS Site" style="position:absolute; top:0px; width:32px; height:37px; margin-left: 460px;"><img src="Free-Camping/markers/PrivateCampingSite.png" width="32" height="37">
</div>
<div id="text Private CampingS Site" style="position:absolute; top:7px; width:100px; height:15px; margin-left: 492px;"><span class="legend_text">PrivateCampingSite</span>
</div>

<div id="image Roadside Rest Area" style="position:absolute; top:0px; width:32px; height:37px; margin-left: 610px;"><img src="Free-Camping/markers/RoadsideRestArea.png" width="32" height="37">
</div>
<div id="text Roadside Rest Area" style="position:absolute; top:7px; width:100px; height:15px; margin-left: 642px;"><span class="legend_text">Roadside Rest Area</span>
</div>

</div>


<div id="form" style="position:absolute; left:0px; margin-left: 0px; top:603px; width:788px; height:1180px; background-color: #f4f4f4; layer-background-color: #f4f4f4; border: 1px none #000000;" class="form">
<form action="free_camping_insert.php" method="post" enctype="multipart/form-data">

<div id="form" style="position:absolute; left:14; top:0px; width:760px; height:335px;" class="form2">
  <p align="center" class="headers">Add a New Free Camping Site</p>
  <p align="center"><span class="text">Your Name:</span>      <input type="text" name="name2" />
      <br>
      <br>

      <span class="text">Your Email:</span>  
      <input type="text" name="email" />
  <br>
  <br>

  <span class="text">Campsite name*:</span>  
  <input type="text" name="name" />
  <br>
  <br>

  <span class="text">Campsite Street:</span>  
  <input name="street" type="text" size="26" />
  <br>
  <br>

  <span class="text">Campsite Locality:</span>  
  <input name="locality" type="text" size="25" />
  <br>
  <br>

  <span class="text">Type of Campsite*:</span>
  <select name="category">
    <option value="1">Beach Camping Site</option>
    <option value="2">Bush Camping Site</option>
    <option value="3">Park Forest Reserve</option>
    <option value="4">Private Camping Site</option>
    <option value="5">Roadside Rest Area</option>
  </select>
  <p align="center" class="text">
  <label>Upload Picture</label>
 <input type="file" name="image" /><br>
</div>

<div id="form" style="position:absolute; left:14; top:335px; width:760px; height:150px;" class="form2">
  <p align="center" class="headers">Select Campsite Amenities</p>
  <p align="center"><img src="Free-Camping/images2/AmenitiesIcons.png" width="682" height="44">   </p>

  <div id="checkbox1" style="position:absolute; left:50px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="toilet" value="No">
  <input type="checkbox" name="toilet" value="Yes">
  </div>

  <div id="checkbox2" style="position:absolute; left:108px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="bbq" value="No">
  <input type="checkbox" name="bbq" value="Yes">
  </div>

  <div id="checkbox3" style="position:absolute; left:165px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="able" value="No">
  <input type="checkbox" name="able" value="Yes">
  </div>

  <div id="checkbox4" style="position:absolute; left:223px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="tentok" value="No">
  <input type="checkbox" name="tentok" value="Yes">
  </div>

  <div id="checkbox5" style="position:absolute; left:281px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="caravanok" value="No">
  <input type="checkbox" name="caravanok" value="Yes">
  </div>

  <div id="checkbox6" style="position:absolute; left:338px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="dumppoint" value="No">
  <input type="checkbox" name="dumppoint" value="Yes">
  </div>

  <div id="checkbox7" style="position:absolute; left:398px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="shade" value="No">
  <input type="checkbox" name="shade" value="Yes">
  </div>

  <div id="checkbox8" style="position:absolute; left:454px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="water" value="No">
  <input type="checkbox" name="water" value="Yes">
  </div>

  <div id="checkbox9" style="position:absolute; left:512px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="swimming" value="No">
  <input type="checkbox" name="swimming" value="Yes">
  </div>

  <div id="checkbox10" style="position:absolute; left:570px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="fishing" value="No">
  <input type="checkbox" name="fishing" value="Yes">
  </div>

  <div id="checkbox11" style="position:absolute; left:629px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="hiking" value="No">
  <input type="checkbox" name="hiking" value="Yes">
  </div>

  <div id="checkbox12" style="position:absolute; left:687px; top:102px; width:25px; height:25px;">
  <input type="hidden" name="mobileok" value="No">
  <input type="checkbox" name="mobileok" value="Yes">
  </div>

  <p align="center"><br>
</div>

<div id="form" style="position:absolute; left:14; top:485px; width:760px; height:625px;" class="form2"> 
  <div align="center"><span class="headers">Description of the Campsite </span><span class="text">(tell as a bit about the site)</span>    </p>
  </div>
  <p align="center">    <textarea name="description" cols="85" rows="7" class="borders_around_form_boxes"></textarea>
    <br>
    </p>
  <p align="center" class="headers">Location of the Free Campsite</p>
  <p align="center" class="text">Enter the GPS coordinates in the boxes to create a new marker.</p>
  <div align="center"><br align="center" class="text"> 
      <span class="text">You can be oriented by red marker that are displayed in the map centar, which you can drag and drop on the map.</span> </br>
  </div>
  <div class="text" id="infoPanel">
    <div align="center"><b>Marker status:</b>
    </div>
    <div align="center" id="markerStatus">
      <div align="center"><i>Click and drag the marker.</i></div>
    </div>
    <div align="center"><b>Closest matching address:</b>
    </div>
    <div align="center" id="address"></div>
  </div>

            <p align="center"><span class="text">Latitude*:</span>
              <input size="20" type="text" align="center" id="info" name="lat" /><br>
            <br>
            <span class="text">Longitude*:</span>        
            <input size="20" type="text" align="center" id="info2" name="lng"/><br>
            <br>

            <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
            <input type="image" name="submit" id="submit" src="Free-Camping/images2/SubmitCampsiteButton_1.png"/>
            </p>

<p align="left"><span class="text"><em> * - Mandatory Fields </em></span> </p>

</div>
</div>
</div>
</body>
</html>

最好，达科

关于php - Google map API - 在单独的文本字段内显示可拖动标记 Lat 和 Lng，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16983463/

上一篇：php - 我怎样才能让这个div元素消失

下一篇：javascript - Flex slider 无法正常工作 最后一张幻灯片

相关文章：

css - &lt;!DOCTYPE html> 更改输入文本框大小(高度和宽度)

python - 使用 Web(Html css) 和 Python 进行人脸检测

php - 警告 : mysqli_connect(): Unknown MySQL server host

php - 如何根据用户选择对数据库中的数据进行排序

php - 收集最低数字算法

javascript - 在 CoffeeScript 中将参数传递给带有 `myarguments...` 的函数时出现问题

javascript - 基本的 node.js 代码不工作

php - 将值推送到 Laravel 中的现有缓存值

javascript - 勾选了一个Jsp页面的所有CheckBox

html - 在 Bootstrap 中居中一行

©2024 IT工具网  联系我们