Question

我将mysql数据库中的点加载到谷歌地图中。例如，这些是交通建设地点。

我的问题是，当拖动每个点时，如何让lat / lng更新加载点？您可以在下面看到修改后的代码。我希望能够将任何/所有点拖动到新位置，并在infowindow表单的lat / lng字段中更新lat / lng，以便可以在数据库中提交和更新。

我可以在添加新点但未加载多个时获得此值。我可以以某种方式让this使用单个加载点吗？没有任何工作。

如果需要，我可以提供“工作”地图。

struct node

{ int data;
  struct node* next;  // Problem in this line,how we declared a node type pointer      
                      //before the node actually gets created . 
} var_node;

感谢您的帮助。

Answer 1

为您的标记添加一个dragend侦听器。
使用它来更新infowindow中的表单。

google.maps.event.addListener(marker, 'dragend', function() {
    document.getElementById('lat').value = this.getPosition().lat();
    document.getElementById('lng').value = this.getPosition().lng();
});

（您可能也希望将经度添加到表单中）

proof of concept fiddle

代码段

var customIcons = {
  restaurant: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  },
  bar: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  }
};

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(37.4419, -122.1419),
    zoom: 13,
    mapTypeId: 'roadmap'
  });


  var infoWindow = new google.maps.InfoWindow;
  // Change this depending on the name of your PHP file
  // downloadUrl("phpsqlajax_genxml.php", function (data) {
  var xml = parseXml(xmlStr); // data.responseXML;
  var markers = xml.documentElement.getElementsByTagName("marker");
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; i++) {
    var name = markers[i].getAttribute("name");
    var address = markers[i].getAttribute("address");
    var type = markers[i].getAttribute("type");
    //          var latlng = markers[i].getPosition();
    var latitude = markers[i].getAttribute("lat");
    var longitude = markers[i].getAttribute("lng");
    var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")),
      parseFloat(markers[i].getAttribute("lng")));
    bounds.extend(point);
    var html = "<table class='tg'>" +
      "<tr>" +
      "<th class='tg-031e'>Name</th>" +
      "<th class='tg-031e'>Address</th>" +
      "<th class='tg-031e'>Work Type</th>" +
      "<th class='tg-031e'>Latitude</th>" +
      "<th class='tg-031e'>Longitude</th>" +
      "</tr>" +
      "<tr>" +
      "<td class='tg-031e'><input type='text' id='name' value='" + name + "'/> </td>" +
      "<td class='tg-031e'><input type='text' id='address' value='" + address + "'/> </td>" +
      "<td class='tg-031e'><input type='text' id='type' value='" + type + "'/> </td>" +
      "<td class='tg-031e'><input type='text' id='lat' value='" + latitude + "'/> </td>" +
      "<td class='tg-031e'><input type='text' id='lng' value='" + longitude + "'/> </td>" +

      "</tr>" +
      "</table>" +
      "<input type='submit' value='submit' onclick='return chk()'>";

    //          var html = "<b>" + name + "</b> <br/>" + address + "<br/>" + type + "<br/>" + latitude + "<br/>" + longitude + "<input";
    var icon = customIcons[type] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      draggable: true,
      icon: icon.icon,
      shadow: icon.shadow
    });
    bindInfoWindow(marker, map, infoWindow, html);
  }
  // });
  map.fitBounds(bounds);
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
  google.maps.event.addListener(marker, 'dragend', function() {
    document.getElementById('lat').value = this.getPosition().lat();
    document.getElementById('lng').value = this.getPosition().lng();
  });
}

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 parseXml(str) {
  if (window.ActiveXObject) {
    var doc = new ActiveXObject('MicrosoftXMLDOM');
    doc.loadXML(str);
    return doc;
  } else if (window.DOMParser) {
    return (new DOMParser).parseFromString(str, 'text/xml');
  }
}

google.maps.event.addDomListener(window, 'load', load);

var xmlStr = '<markers><marker name="Mattatuck Trail Parking 1" address="addr1" lat="41.784969" lng="-73.319489" type="parking"/><marker name="Mattatuck Trail Parking 2" address="addr2" lat="41.821751" lng="-73.296867" type="parking"/><marker name="Mattatuck Trail Parking 3" address="addr3" lat="41.784969" lng="-73.319489" type="parking"/><marker name="Mohawk Trail Parking 1" address="addr4" lat="41.818535" lng="-73.368477" type="parking"/><marker name="Mohawk Trail Parking 2" address="addr5" lat="41.784969" lng="-73.319489" type="parking"/><marker name="Appalacian Trail Parking 1" address="addr6" lat="41.731030" lng="-73.490692" type="parking"/><marker name="Appalacian Trail Parking 2" address="addr7" lat="41.807705" lng="-73.391785" type="parking"/><marker name="Appalacian Trail PArking 3" address="addr8" lat="41.731030" lng="-73.490692" type="parking"/><marker name="Dawley Pond Shelter" address="addr9" lat="41.621277" lng="-71.815392" type="shelter"/><marker name="Pachaug Dry Resevoir Shelter" address="addr10" lat="41.590752" lng="-71.881386" type="shelter"/></markers>';

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>

Answer 2

更新可拖动标记;通过php，到数据库。这是你的问题，对吗？

这是一个简单的例子。我无视其他任何事情，与此问题没有特别的关联。

update.php

<?php
$marerLocations = isset($_POST['markers']) ? $_POST['markers'] : array();  // still a JSON string
$location = json_decode($marerLocations);
echo '<pre>' . print_r($location, true) . '</pre>';
?>

（我认为你可以从这里开始处理数据库更新。）

的index.php

<div id="map" style="height: 500px;"></div>
<form action="update.php" method="post">
  <input readonly="readonly" name="markers" id="markers" style="width: 500px;"><br>
  <input type="submit" value="UPDATE">
</form>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var locations = [ // some points in/close to Belgium
  [50,    4],
  [50.5,  4.5],
  [51,    5],
  [51.5,  5.5]
];
var markers = [];
function initialize() {
    var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(50.5,  4.5),
        zoom: 7,
        mapTypeId: 'roadmap'
    });
    // generate the markers
    for (var i in locations) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: map,
        draggable: true
      });
      google.maps.event.addListener(marker, 'dragend', function() {
        update_markers();
      })
      // store the variable in the array
      markers.push(marker);
    }
    update_markers();

    function update_markers() {
        // read locations of all markers, update var locations
        for (var j in locations) {
          locations[j] = [markers[j].position.lat(), markers[j].position.lng()]
        }
        var json_string = JSON.stringify(locations);
        document.getElementById("markers").value = json_string;
    }
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

谷歌地图，lat / lng加载点

2 个答案: