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

时间:2011-03-18 18:57:25

标签: javascript ajax google-maps

我在使用GMAP V3时遇到了麻烦,当我意识到我需要在数据库中保存地图中的更改时,我发现无法做到这一点。在开始变通之前我想先听一些想法,并且没有更好的地方可以做到这一点,comunnity 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中是否有一些功能,那么我不需要重新发明轮子..

另一个问题是,我只需删除一个标记,但我只删除了所有标记,现在我只需删除一个标记。

我认为在函数addMarker中使用var标记我可以用来将值放在数据库中,但是如何?

1 个答案:

答案 0 :(得分:1)

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

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

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

要保持独立的另一个区域是您的数据库交互。这些可以使用AJAX完成。在这里,我建议你引入一个规范化浏览器之间差异的库。我个人喜欢jQuery。我会将所有数据库调用放入javascript对象中。或者至少将db调用放在'save'按钮事件处理程序中。使用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');
    }
});

希望这有帮助。

鲍勃