如何在谷歌地图api v3中绘制可拖动和可调整大小的矩形

时间:2012-04-05 13:34:13

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

我想绘制一个自定义矩形,可以调整大小并使用关闭按钮拖动 它由数据库中查询返回的边界构成。

由于

2 个答案:

答案 0 :(得分:2)

这是一个可调整大小且可拖动的矩形。一点点搜索和一些尝试会给你你需要的东西。

function initialize() {
        var myOptions = {
          center: new google.maps.LatLng(44.5452, -78.5389),
          zoom: 9,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),
          myOptions);

        var bounds = new google.maps.LatLngBounds(
          new google.maps.LatLng(44.490, -78.649),
          new google.maps.LatLng(44.599, -78.443)
        );

        var rectangle = new google.maps.Rectangle({
          bounds: bounds,
          editable: true
        });

        rectangle.setMap(map);
      }

      google.maps.event.addDomListener(window, 'load', initialize);

希望这有帮助!

答案 1 :(得分:1)

我认为您需要添加的唯一内容是矩形选项中的“draggable:true”。

所以,它应该是这样的;

var rectangle = new google.maps.Rectangle({
      bounds: bounds,
      editable: true,
      draggable: true
    });

这将使矩形可调整大小并可拖动。同样在页面正文中创建一个按钮。

<body >
<button onclick="remove()">Close</button>      
</body>

在内部删除功能中,您可以编写代码以连接到数据库。您必须在initialize()之外声明边界才能访问它。此链接可能有助于您了解如何连接谷歌地图和MySQL。 https://developers.google.com/maps/articles/phpsqlajax_v3