Google 地图 API v3 唯一标记 JS

Question

我正在尝试在简单的 javascript 网络 API 上使用唯一标记，没有 jQuery。

我首先尝试每次点击地图时删除之前的标记，

marker.setMap(null);

就在创建新的之前，但它阻止了新的，屏幕上没有任何显示。

我可以使用按钮或其他事件轻松删除标记，但有没有办法自动执行此操作，并且地图上只有一个标记（使用 draggable: true 移动它，也许 dblClick 删除它) ?

通常触发标记创建

google.maps.event.addListener(map, "click", function(event) {...

var marker = new google.maps.Marker({...

该界面用于定义单个位置，因此我不希望屏幕上有多个标记；然后将坐标保存在数据库中。

Answer 1

当您使用 var 关键字添加标记时，以后将无法访问变量，setMap 的调用失败（并停止进一步的脚本执行），因为未定义变量。

使用单个标记的示例（标记将存储为地图的属性）：

    google.maps.event.addListener(map, "click", function(event) {
      //closure for the map
      var that=this;
      //only create a single marker
      if(!this.marker){
         var input = document.getElementById("location_name");
         this.marker = new google.maps.Marker({draggable:true,title:input.value});
         google.maps.event.addListener(this.marker,'dblclick',function(){
            this.setMap(null);
         });
         //update title
         google.maps.event
          .addDomListener(input,
                          'change',
                          function(){ 
                            that.marker.setTitle(this.value);
                          }
                         );
      }
      //update position
      this.marker.setOptions({map      : this,
                              position : event.latLng
                             });
    });

Google 地图 API v3 唯一标记 JS

Google Maps API v3 UNIQUE marker JS

javascript

google-maps

google-maps-api-3