javascript - d3.js 套索绘制多边形形状搜索工具 - 在谷歌地图上(获取给定区域的坐标/用户)

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 9 年前。

Improve this question

尝试构建一个位置搜索应用程序，该应用程序显示谷歌地图 - 用户在 map 上绘图时，它会显示位于该区域内的所有用户。

我也发现了这个例子 - 但它看起来笨重/不流畅 - http://jsfiddle.net/pPMqQ/34/

http://jsfiddle.net/4xXQT/156/

var width = 960,
    height = 500;

var points = d3.range(1, 5).map(function(i) {
  return [i * width / 5, 50 + Math.random() * (height - 100)];
});

var dragged = null,
    selected = points[0];

var line = d3.svg.line();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("tabindex", 1);

svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .on("mousedown", mousedown);

svg.append("path")
    .datum(points)
    .attr("class", "line")
    .call(redraw);

d3.select(window)
    .on("mousemove", mousemove)
    .on("mouseup", mouseup)
    .on("keydown", keydown);

d3.select("#interpolate")
    .on("change", change)
  .selectAll("option")
    .data([
      "linear",
      "step-before",
      "step-after",
      "basis",
      "basis-open",
      "basis-closed",
      "cardinal",
      "cardinal-open",
      "cardinal-closed",
      "monotone"
    ])
  .enter().append("option")
    .attr("value", function(d) { return d; })
    .text(function(d) { return d; });

svg.node().focus();

function redraw() {
  svg.select("path").attr("d", line);

  var circle = svg.selectAll("circle")
      .data(points, function(d) { return d; });

  circle.enter().append("circle")
      .attr("r", 1e-6)
      .on("mousedown", function(d) { selected = dragged = d; redraw(); })
    .transition()
      .duration(750)
      .ease("elastic")
      .attr("r", 6.5);

  circle
      .classed("selected", function(d) { return d === selected; })
      .attr("cx", function(d) { return d[0]; })
      .attr("cy", function(d) { return d[1]; });

  circle.exit().remove();

  if (d3.event) {
    d3.event.preventDefault();
    d3.event.stopPropagation();
  }
}

function change() {
  line.interpolate(this.value);
  redraw();
}

function mousedown() {
  points.push(selected = dragged = d3.mouse(svg.node()));
  redraw();
}

function mousemove() {
  if (!dragged) return;
  var m = d3.mouse(svg.node());
  dragged[0] = Math.max(0, Math.min(width, m[0]));
  dragged[1] = Math.max(0, Math.min(height, m[1]));
  redraw();
}

function mouseup() {
  if (!dragged) return;
  mousemove();
  dragged = null;
}

function keydown() {
  if (!selected) return;
  switch (d3.event.keyCode) {
    case 8: // backspace
    case 46: { // delete
      var i = points.indexOf(selected);
      points.splice(i, 1);
      selected = points.length ? points[i > 0 ? i - 1 : 0] : null;
      redraw();
      break;
    }
  }
}

Answer 1

最新代码“http://jsfiddle.net/Cbk9J/188/”

<小时/>

这演示了如何绘制多边形和手绘形状。

$(".drawfreehand").click(function(e) {
    e.preventDefault();
    console.log("drawfreehand");

    function drawFreeHand(){

        //the polygon
        that.newShape= new google.maps.Polyline({map:that.map,clickable:false});

        //move-listener
        var move = google.maps.event.addListener(that.map,'mousemove',function(e){
            that.newShape.getPath().push(e.latLng);
        });

        //mouseup-listener
        google.maps.event.addListenerOnce(that.map,'mouseup',function(e){


            google.maps.event.removeListener(move);

            var path= that.newShape.getPath();

            that.newShape.setMap(null);

            that.newShape=new google.maps.Polygon({map:that.map,path:path});


            google.maps.event.clearListeners(that.map.getDiv(), 'mousedown');

            enable()

            that.newShape.setEditable(false);
            that.revealInsidePolygon(that.newShape);

        });
    }

    function disable(){
        that.map.setOptions({
            draggable: false, 
            zoomControl: false, 
            scrollwheel: false, 
            disableDoubleClickZoom: false
        });
    }

    function enable(){
        that.map.setOptions({
            draggable: true, 
            zoomControl: true, 
            scrollwheel: true, 
            disableDoubleClickZoom: true
        });
    }

    disable()

    google.maps.event.addDomListener(that.map.getDiv(),'mousedown',function(e){
        drawFreeHand()
    });


});