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

来源：互联网发布：ico透明图标制作软件编辑：程序博客网时间：2024/04/30 10:34

<%--  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>

0 0