一键点一圈--谷歌地图API--Cartodb答案

【问题标题】：Only one circle for one click on point-- Google Maps Api -- Cartodb一键点一圈--谷歌地图API--Cartodb
【发布时间】：2015-10-10 21:16:16
【问题描述】：

当用户点击点（Cartodb层）时，我想只画一个圆圈（Google.Maps.Circle），也许最后一个画的圆圈会被自动删除。这是我的代码：

//CARTODB layer
        var cartoLayer = cartodb.createLayer(map, {
        user_name: 'username',
        type: 'namedmap',
        named_map: {
        name: "namemap",
        layers: [{
        layer_name: "t",
        interactivity: "cartodb_id, name, coordinateuncertaintyinmeters, class"
        }]
        }
        });
        cartoLayer.addTo(map)
        .done(function(layer) {
          layer.getSubLayer(0).setInteraction(true);
          layer.setZIndex(9);

        // on mouseover
            layer.getSubLayer(0).on('featureOver', function(e, pos, pixel, data) {
        // print data to console log
            console.log("Event #" + data.cartodb_id + ", Name " + data.name + ", Clase: " + data.class+ ",Incertidumbre(m.) " + data.coordinateuncertaintyinmeters );
          });

        layer.on('featureClick', function(e, latlng, pos, data) {

                //DRAW A CIRCLE WHEN CLICK ON ONE POINT

                        circle = L.circle(latlng, data.coordinateuncertaintyinmeters, {
                        color: 'red',
                        fillColor: '#f03',
                        fillOpacity: 0.5
                    }).addTo(map); 
          });
        // show infowindows on click
        cdb.vis.Vis.addInfowindow(map, layer.getSubLayer(0), ['cartodb_id','name', 'coordinateuncertaintyinmeters', 'class']);
         });

非常感谢！

【问题讨论】：

标签： javascript google-maps onclick geometry cartodb

【解决方案1】：

很难理解您的问题是什么...当用户点击地图时，您需要帮助删除现有圈子吗？我假设是这样的。应该是一个简单的修复 - 只需声明一个 'circle' 变量并添加一个 if 语句：

 layer.on('featureClick', function(e, latlng, pos, data) {

      //DECLARE VAR HERE
      var circle = L.circle(latlng, data.coordinateuncertaintyinmeters, {color: 'red', fillColor: '#f03', fillOpacity: 0.5});

      //ADD THIS IF STATEMENT
      if (circle){
         map.removeLayer(circle);
         }
      else{
         circle.addTo(map);
         }; 
      });

不管怎样，不确定这是否正是您想要的，但希望对您有所帮助。

【讨论】：