谷歌地图api用户可以选择区域

时间:2011-11-05 09:28:54

标签: api google-maps

我想为我的城市创建一个本地地图,人们可以用多边形覆盖区域并获取经度和纬度

例如,有一张世界地图,有人来了,他想要覆盖我们,然后他可以简单地覆盖它并获得其角落或边界的经度和经度

我是否有任何方式或示例我在谷歌和网站上搜索它但都没有得到任何东西

抱歉,我没有代码,我想要想法,代码或有用的东西。

4 个答案:

答案 0 :(得分:9)

简单搜索产生了http://www.the-di-lab.com/polygon/,您可以在http://code.google.com/apis/maps/documentation/javascript/demogallery.html找到更多样本。

不幸的是,上面的演示是一个缩小的js。但是在谷歌地图上绘制多边形(区域)的关键部分是 1.加载地图 2.捕获点击事件和位置(lat / lon) 画线 4.最后,当收到双击时,关闭多边形

遗憾的是,我手边没有现成的样品。

答案 1 :(得分:3)

这里的答案已经过时了。 Google Maps现在有一个图形库,该库允许用户插入标记,圆形,多边形和其他类型。

您可以在here上找到示例。并且库参考here。 还有文档here

enter image description here

答案 2 :(得分:0)

我认为您需要使用GeoChart https://developers.google.com/chart/interactive/docs/gallery/geochart?csw=1。它可以覆盖某些地区或区域

答案 3 :(得分:0)

似乎现在有一个更简单的解决方案。在Muthu之前共享的同一demo gallery link中,寻找user editable shapes。以下是此链接中的示例代码,该代码绘制了一个矩形并允许用户进一步编辑形状

    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 44.5452, lng: -78.5389},
      zoom: 9
    });

    var bounds = {
      north: 44.599,
      south: 44.490,
      east: -78.443,
      west: -78.649
    };

    // Define a rectangle and set its editable property to true.
    var rectangle = new google.maps.Rectangle({
      bounds: bounds,
      editable: true
    });
    rectangle.setMap(map);
  }

这也是jsfiddle上的一个示例,该示例从上面延伸到广义多边形,而下面是来自链接的代码

  var editablePolygon = new google.maps.Polygon({
    paths: coords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    editable: true   });

随附的是屏幕截图(在三角形中拖动一个中点节点之后)

enter image description here