谷歌地图鼠标绘制多边形方法

最新推荐文章于 2023-01-09 00:41:39 发布

原创最新推荐文章于 2023-01-09 00:41:39 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#谷歌地图 #多边形绘制 #JavaScript

谷歌地图专栏收录该内容

1 篇文章

订阅专栏

这篇博客展示了如何使用JavaScript实现谷歌地图上的多边形绘制功能。通过监听地图的点击事件，每次点击都会在地图上添加一个新的点到多边形路径中。当用户右键点击地图时，绘制结束，弹出警告框显示所有路径点的坐标。代码中创建了一个不可点击的Polygon对象，并设置了其颜色和线条样式。地图初始化后，为地图添加了点击和右键点击事件监听器，实现了动态绘制和结束绘制的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2015/8/28
  Time: 14:38
  To change this template use File | Settings | File Templates.
--%>

<html>
<head>
  <meta charset="utf-8"/>
  <script src="http://maps.google.cn/maps/api/js?key=你的KEY"></script>
    <title></title>

  <script>
    var linePath=[];
    var lineArea=new google.maps.Polygon({
      clickable:false,
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 1 //粗细
      // fillColor: "#FF0000",//填充色
      //  fillOpacity: 0.1//透明度
    });
    var drawListener;
    $(function(){
      map = new google.maps.Map(document.getElementById("mapContainer"), {
        zoom: 15,
        center: {lat: 33.837678, lng: 113.951339},
        mapTypeId: google.maps.MapTypeId.SATELLITE,
      });

<span style="font-family: Arial, Helvetica, sans-serif;">//给map添加click事件,用于侦听单击画线</span>

      drawListener=google.maps.event.addListener(map, 'click',
              function(event) {
                  linePath.unshift(event.latLng);
                  //画多边形
                  if (lineArea != null) {
                    lineArea.setMap(null);
                  }
                  lineArea.setPath(linePath);
                  lineArea.setMap(map);
              });

      //添加右键事件，点击右键结束绘制并输出所有的路径点
      google.maps.event.addListener(map, 'rightclick',
              function(event) {
                google.maps.event.removeListener(drawListener);
                alert(linePath.toString());
              });
    });
    

  </script>
</head>
<body>
<div id="mapContainer" style="width:100%;height: 100%;">

</div>
</body>
</html>