如何创建一个底部关闭的绘图搜索区域,如Yelp.com?

时间:2012-03-30 10:37:30

标签: google-maps google-maps-api-3

我在API的第3版中编写了以下代码:

  var polyOptions = {
      strokeWeight: 0,
      fillOpacity: 0.45,
      editable: true
    };
    // Creates a drawing manager attached to the map that allows the user to draw
    // markers, lines, and shapes.
    drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.POLYGON,
      markerOptions: {
        draggable: true
      },
      polylineOptions: {
        editable: true
      },
      rectangleOptions: polyOptions,
      map: map
    });

    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
        if (e.type != google.maps.drawing.OverlayType.MARKER) {
        // Switch back to non-drawing mode after drawing a shape.
        drawingManager.setDrawingMode(null);

        // Add an event listener that selects the newly-drawn shape when the user
        // mouses down on it.
        var newShape = e.overlay;
        newShape.type = e.type;
        google.maps.event.addListener(newShape, 'click', function() {
          setSelection(newShape);
        });
        setSelection(newShape);
      }
    });

    // Clear the current selection when the drawing mode is changed, or when the
    // map is clicked.
    google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
    google.maps.event.addListener(map, 'click', clearSelection);
    google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);

    buildColorPalette();
}

这需要一些工作,但我想要像Yelp这样的自定义绘图搜索区域。我需要关闭底部,我想删除平局的控制权。我需要一个像Yelp这样的矩形绘制的外部链接,从地图绘制搜索区域开始。

1 个答案:

答案 0 :(得分:0)

你错过了数学。这是一个开始:

使用余弦球面定律或者Haversine,计算矩形边界,然后检查哪些标记在边界内。