Fatal编程技术网
  • javascript/
  • Javascript 在谷歌地图上使用鼠标绘制多边形

Javascript 在谷歌地图上使用鼠标绘制多边形

javascript google-maps

Javascript 在谷歌地图上使用鼠标绘制多边形,javascript,google-maps,Javascript,Google Maps,我需要使用鼠标绘制多边形，并在谷歌地图上标记特定区域。目的是在谷歌地图上标出一个区域，然后显示该区域的酒店和景点。用户在创建酒店时会在谷歌地图上标记这些酒店，这样数据库就会有它们的纬度和经度 如何绘制多边形并用颜色作为背景填充，以在谷歌地图中标记该区域？我已经阅读了API手册“如何绘制多边形？”基本上你需要标记多个点，然后将它们组合成一个多边形。但我需要使用鼠标拖动来完成此操作，就像绘制形状一样。请帮助我如何实现这一点。您可以在应用程序中使用Google MyMaps多边形编辑工具，也许这对您合

我需要使用鼠标绘制多边形，并在谷歌地图上标记特定区域。目的是在谷歌地图上标出一个区域，然后显示该区域的酒店和景点。用户在创建酒店时会在谷歌地图上标记这些酒店，这样数据库就会有它们的纬度和经度

如何绘制多边形并用颜色作为背景填充，以在谷歌地图中标记该区域？我已经阅读了API手册“如何绘制多边形？”基本上你需要标记多个点，然后将它们组合成一个多边形。但我需要使用鼠标拖动来完成此操作，就像绘制形状一样。请帮助我如何实现这一点。

您可以在应用程序中使用Google MyMaps多边形编辑工具，也许这对您合适

看

但是，如果您想自己实现这一点，基本上是这样的：

添加要映射的单击侦听器

重复： 将用户单击的点存储在数组中，并在此点添加标记。 如果是第一个标记，请单击“添加侦听器”

当用户单击第一个标记时，使用点阵列构建多边形

我没有任何代码可以向您展示，但我已经在以前的一家公司中实现了这一点，因此可以做到：）

您可能想查看的

为了进一步参考，您可能需要浏览。

以下是一些代码（适用于Google Maps JavaScript API第3版），它们可以实现您想要的功能。它支持：

  • 单击以附加顶点
  • 再次单击第一个顶点以关闭路径
  • 拖动顶点
它没有文档记录，但希望你能很容易地看到它在做什么

$(document).ready(function () {
    var map = new google.maps.Map(document.getElementById('map'), { center: new google.maps.LatLng(21.17, -86.66), zoom: 9, mapTypeId: google.maps.MapTypeId.HYBRID, scaleControl: true });
    var isClosed = false;
    var poly = new google.maps.Polyline({ map: map, path: [], strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2 });
    google.maps.event.addListener(map, 'click', function (clickEvent) {
        if (isClosed)
            return;
        var markerIndex = poly.getPath().length;
        var isFirstMarker = markerIndex === 0;
        var marker = new google.maps.Marker({ map: map, position: clickEvent.latLng, draggable: true });
        if (isFirstMarker) {
            google.maps.event.addListener(marker, 'click', function () {
                if (isClosed)
                    return;
                var path = poly.getPath();
                poly.setMap(null);
                poly = new google.maps.Polygon({ map: map, path: path, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35 });
                isClosed = true;
            });
        }
        google.maps.event.addListener(marker, 'drag', function (dragEvent) {
            poly.getPath().setAt(markerIndex, dragEvent.latLng);
        });
        poly.getPath().push(clickEvent.latLng);
    });
});
Google Maps JavaScript API v3提供了一个绘图库

您只需要启用绘图工具（如文档中的示例所示）并添加事件侦听器来创建覆盖类型（如“绘图事件”部分所示）

使用它的一个简单例子是：

有一个API v2绘图工具到API v3的端口。

新的地图引擎Lite正是您要寻找的工具。我认为：

自从第一次提出这个问题以来，google.maps.polygon中有了一些显著的改进。下面是一个简单的实现，使用所有原生的google.maps v3工具。（注意：这里有一个不可靠的JavaScript作用域…但它确实有效…）

以旧问题上提交的新代码回答，以防其他人到这里

我为自己树立了一个榜样。下面是代码，也可以使用JSFIDLE

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing&callback=initMap" async defer></script>

<script>

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
  lat: -34.397,
  lng: 150.644
},
zoom: 8
});

var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: false,
drawingControlOptions: {
  position: google.maps.ControlPosition.TOP_CENTER,
  drawingModes: ['polygon', 'circle']
},
polygonOptions: {
  editable: true
}

});
drawingManager.setMap(map);

google.maps.event.addListener(drawingManager, 'overlaycomplete', 
function(event) {
event.overlay.set('editable', false);
drawingManager.setMap(null);
console.log(event.overlay);
});

}
</script>


函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：{
lat:-34.397，
液化天然气：150.644
},
缩放：8
});
var drawingManager=new google.maps.drawing.drawingManager({
drawingMode:google.maps.drawing.OverlyType.POLYGON，
drawingControl:错误，
drawingControlOptions：{
位置：google.maps.ControlPosition.TOP_CENTER，
绘图模式：[“多边形”、“圆”]
},
多克隆选择：{
可编辑：真
}
});
drawingManager.setMap（map）；
google.maps.event.addListener（drawingManager，'OverlyComplete'，
功能（事件）{
event.overlay.set（'editable'，false）；
drawingManager.setMap（空）；
console.log（event.overlay）；
});
}

如果要显示绘图管理器，可以将drawingcontrol设置为true。我使用以下代码在地图上绘制多边形

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Drawing Tools</title>


绘图工具


#地图，html，正文{
填充：0；
保证金：0；
身高：100%；
}
#面板{
宽度：200px；
字体系列：Arial，无衬线；
字体大小：13px；
浮动：对；
利润率：10px；
}
#调色板{
明确：两者皆有；
}
.彩色按钮{
宽度：14px；
高度：14px；
字号：0；
保证金：2倍；
浮动：左；
光标：指针；
}
#删除按钮{
边缘顶部：5px；
}
#地图画布{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}
var地理编码器；
var映射；
var all_覆盖=[]；
函数初始化（）{
var map=new google.maps.map(
document.getElementById（“地图画布”）{
中心：新google.maps.LatLng（37.4419，-122.1419），
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var多选项={
冲程重量：0，
填充不透明度：0.45，
是的，
填充颜色：“#FF1493”
};
变量选择形状；
var drawingManager=new google.maps.drawing.drawingManager({
drawingMode:google.maps.drawing.OverlyType.POLYGON，
drawingControl:错误，
标记选项：{
德拉格布尔：是的
},
多选项：多选项
});
$（'#enablePolygon'）。单击（函数（）{
drawingManager.setMap（map）；
drawingManager.setDrawingMode（google.maps.drawing.OverlayType.POLYGON）；
});
$（“#重置多边形”）。单击（函数（）{
如果（selectedShape）{
selectedShape.setMap（空）；
}
drawingManager.setMap（空）；
$（'#showonPolygon'）.hide（）；
$（'#resetPolygon'）.hide（）；
});
google.maps.event.addListener（drawingManager，'polygoncomplete'，
函数（多边形）{
//var area=google.maps.geometry.sphereal.computeArea（selectedShape.getPath（））；
//$（'#areaPolygon'）.html（area.toFixed（2）+“Sq meters”）；
$（'#resetPolygon'）.show（）；
});
函数{
如果（selectedShape）{
selectedShape.setEditable（false）；
selectedShape=null；
}
}
功能选择（形状）{
选举（）；
selectedShape=形状；
shape.setEditable（true）；
}
google.maps.event.addListener（drawingManager，'OverlyComplete'，函数（e）{
所有覆盖物。推（e）；
if（e.type！=google.maps.drawing.overlytype.MARKER）{
//绘制形状后切换回非绘制模式。
drawingManager.setDrawingMode（空）；
//添加一个事件侦听器，当用户
//捕鼠

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Drawing Tools</title>



<script type="text/javascript"  src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script>
<style type="text/css">
  #map, html, body {
    padding: 0;
    margin: 0;
    height: 100%;
  }
  #panel {
    width: 200px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    float: right;
    margin: 10px;
  }
  #color-palette {
    clear: both;
  }
  .color-button {
    width: 14px;
    height: 14px;
    font-size: 0;
    margin: 2px;
    float: left;
    cursor: pointer;
  }
  #delete-button {
    margin-top: 5px;
  }
  #map_canvas {
   height: 100%;
   width: 100%;
   margin: 0px;
   padding: 0px
 }

</style>
<script type="text/javascript">
 var geocoder;
 var map;
 var all_overlays = [];

 function initialize() {
     var map = new google.maps.Map(
     document.getElementById("map_canvas"), {
     center: new google.maps.LatLng(37.4419, -122.1419),
     zoom: 13,
     mapTypeId: google.maps.MapTypeId.ROADMAP
     });

var polyOptions = {
     strokeWeight: 0,
     fillOpacity: 0.45,
     editable: true,
     fillColor: '#FF1493'
   };
var selectedShape;

 var drawingManager = new google.maps.drawing.DrawingManager({
           drawingMode: google.maps.drawing.OverlayType.POLYGON,
           drawingControl: false,
           markerOptions: {
           draggable: true
       },
    polygonOptions: polyOptions
     });

  $('#enablePolygon').click(function() {
         drawingManager.setMap(map);
        drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
  });

   $('#resetPolygon').click(function() {
        if (selectedShape) {
             selectedShape.setMap(null);
           }
        drawingManager.setMap(null);
        $('#showonPolygon').hide();
        $('#resetPolygon').hide();
    });

    google.maps.event.addListener(drawingManager, 'polygoncomplete', 

   function(polygon) {
         //  var area = google.maps.geometry.spherical.computeArea(selectedShape.getPath());
        //  $('#areaPolygon').html(area.toFixed(2)+' Sq meters');
      $('#resetPolygon').show();
    });

  function clearSelection() {
      if (selectedShape) {
            selectedShape.setEditable(false);
            selectedShape = null;
         }
    }


   function setSelection(shape) {
          clearSelection();
          selectedShape = shape;
          shape.setEditable(true);
    }

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
all_overlays.push(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);
   }
 });

 google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
var coordinates = (polygon.getPath().getArray());
console.log(coordinates);
alert(coordinates);
 });
}
 google.maps.event.addDomListener(window, "load", initialize);
</script>
</head>
   <body>
    <input type="button" id="enablePolygon" value="Calculate Area" />
    <input type="button" id="resetPolygon" value="Reset" style="display: none;" />
   <div id="showonPolygon" style="display:none;"><b>Area:</b> <span 
     id="areaPolygon">&nbsp;</span></div>
     <div id="map_canvas"></div>
     </html>