使用 Google 地图 API V3 保存和删除标记

Question

我在使用 GMAP V3 时遇到了麻烦，当我意识到我需要将地图中的更改保存到数据库中时，我发现没有办法做到这一点。在开始解决问题之前，我想先听听一些想法。没有比这更好的地方了，社区 stackoverflow 总是给我很好的想法来解决问题，我相信这不会有所不同。

嗯，

我有一个脚本来测量一个区域的海拔，我还在我自己的代码中手动指出了一些东西，按照这个例子：

  var examples = [{
    latlngs: [
      [-24.116537, -49.358257],
      [-24.123348, -49.344267],
      [-24.122409, -49.329212],
      [-24.116478, -49.306664],
      [-24.101001, -49.313376],
      [-24.095218, -49.333645]
    ],
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
    }, {
    latlngs: [
      [-23.991412, -48.894621],
      [-23.969345, -48.884353],
  [-23.973734, -48.855789],
  [-23.996274, -48.860673],
  [-24.00085, -48.886786]
    ]
    mapType: google.maps.MapTypeId.SATELLITE,
    travelMode: 'direct'
   }];

然后初始化一切：

  function initialize() {
    var myLatlng = new google.maps.LatLng(15, 0);
    var myOptions = {
      zoom: 1,
      center: myLatlng,
      mapTypeControl: true,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    }

现在我有了在地图上添加标记的功能

// Add a marker and trigger recalculation of the path and elevation
  function addMarker(latlng, doQuery) {
    if (markers.length < 100) {

      var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        draggable: true
      })

      google.maps.event.addListener(marker, 'dragend', function(e) {
        updateElevation();
      });

      markers.push(marker);

      if (doQuery) {
        updateElevation();
      }

      if (markers.length == 100) {
        document.getElementById('address').disabled = true;
      }
    } else {
      alert("Apenas 100 pontos podem ser adicionados.");
    }
  }

'直到这里一切正常，但我需要向地图添加一些功能。 我需要在地图上添加一个新标记和一个保存按钮，因为我需要将新更改转到我的数据库中。我只想知道 GMAP API 中是否有某些功能，然后我不需要重新发明轮子..

另一个问题，我只需要删除一个标记，我已经这样做了，但只删除所有标记，现在我只需要删除一个。

我认为在带有 var 标记的函数 addMarker 中，我可以使用将值放入数据库，但是如何？

Answer 1

我建议您查看您的代码并找到解耦这些功能的方法。例如，您可以包装谷歌地图 api 并使其通用。例如，这是我写的：

http://bobcravens.com/files/gmap3/0.1/jquery.gmap3.js

在此包装器中，您可以看到如何添加/删除单个标记的示例。

另一个要分开的领域是您的数据库交互。这些可以使用 AJAX 来完成。在这里，我建议您引入一个标准化浏览器之间差异的库。我个人喜欢 jQuery。我会将所有数据库调用放入一个 javascript 对象中。或者至少将数据库调用放在“保存”按钮事件处理程序中。使用 jQuery 的 AJAX 调用如下所示：

var data = {};
data.lat = 89.0;
data.lng = -10.0;
data.name = 'marker name';
$.ajax({
    url: 'api/1.0/markers/save.php',
    type: 'post',
    data: data,
    error: function(){
        alert('Error on ajax.');
    },
    success: function(data){
       alert('success...do other stuff here');
    }
});

希望这会有所帮助。

鲍勃