画多边形区域、获取多边形的节点数组，点击位置坐标

此示例展示如何在绘制多边形区域、获取获取多边形的节点信息、获取点击位置坐标。

关键代码

    var triangleCoords = [
        new sogou.maps.LatLng(39.992792,116.326142),
        new sogou.maps.LatLng(39.986017,116.31049),
        new sogou.maps.Point(12949589,4835996)
    ];
    bermudaTriangle = new sogou.maps.Polygon({
      paths: triangleCoords,
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 3,
      fillColor: "#FF0000",
      fillOpacity: 0.35
    });
    bermudaTriangle.setMap(map);
    
    //添加点击多边形的侦听器，当点击时触发
    sogou.maps.event.addListener(bermudaTriangle, 'click', showArrays);
    infowindow = new sogou.maps.InfoWindow();

  function showArrays(event) {
    // 获取多边形的节点坐标序列
    var vertices = this.getPath();
    var contentString = "";
    contentString += "点击位置的坐标: 
" + event.point.x + "," + event.point.y + "
";
    // 遍历节点
    for (var i =0; i < vertices.length; i++) {
      var xy = vertices[i];
      contentString += "
" + "多边形 第: " + i + " 个节点坐标
" + xy.x +"," + xy.y;
    }
    // 设置信息窗位置到点击的位置
    infowindow.setContent(contentString);
    infowindow.setPosition(event.point);
    infowindow.open(map);
  }

代码解析

根据提供的节点坐标绘制多边形。

    var triangleCoords = [
        new sogou.maps.LatLng(39.992792,116.326142),
        new sogou.maps.LatLng(39.986017,116.31049),
        new sogou.maps.Point(12949589,4835996)
    ];
    bermudaTriangle = new sogou.maps.Polygon({
      paths: triangleCoords,
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 3,
      fillColor: "#FF0000",
      fillOpacity: 0.35
    });
    bermudaTriangle.setMap(map);

添加多边形对象点击时的侦听。创建信息框对象。

    //添加点击多边形的侦听器，当点击时触发
    sogou.maps.event.addListener(bermudaTriangle, 'click', showArrays);
    infowindow = new sogou.maps.InfoWindow();

点击多边形对象，使用this.getPath()获取节点数组。在信息框中填写点击位置坐标和多边形节点坐标。

  function showArrays(event) {
    // 获取多边形的节点坐标序列
    var vertices = this.getPath();
    var contentString = "";
    contentString += "点击位置的坐标: 
" + event.point.x + "," + event.point.y + "
";
    // 遍历节点
    for (var i =0; i < vertices.length; i++) {
      var xy = vertices[i];
      contentString += "
" + "多边形 第: " + i + " 个节点坐标
" + xy.x +"," + xy.y;
    }
    // 设置信息窗位置到点击的位置
    infowindow.setContent(contentString);
    infowindow.setPosition(event.point);
    infowindow.open(map);
  }

完整代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
<title>搜狗地图 JavaScript API 示例:画多边形区域、获取多边形的节点数组，点击位置坐标</title>
<style type="text/css">
html {height: auto;}
body {height: auto;margin: 0;padding: 0;}
#map_canvas {width:1000px;height: 500px;position: absolute;}
@media print {#map_canvas {height: 950px;}}
</style>
<script type="text/javascript" src="http://api.go2map.com/maps/js/api_v2.5.1.js"></script>
<script type="text/javascript">
 /**
  * 画多边形区域、获取多边形的节点数组，点击位置坐标
  * 点击多边形可打开信息窗，显示坐标信息
  */
  var map;
  var infoWindow;

  function initialize() {
    var myLatLng = new sogou.maps.LatLng(39.987636,116.320492);
    var myOptions = {
      zoom: 15,
      center: myLatLng,
      mapTypeId: sogou.maps.MapTypeId.TERRAIN
    };

    var bermudaTriangle;

    map = new sogou.maps.Map(document.getElementById("map_canvas"),
        myOptions);

    var triangleCoords = [
        new sogou.maps.LatLng(39.992792,116.326142),
        new sogou.maps.LatLng(39.986017,116.31049),
        new sogou.maps.Point(12949589,4835996)
    ];

    bermudaTriangle = new sogou.maps.Polygon({
      paths: triangleCoords,
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 3,
      fillColor: "#FF0000",
      fillOpacity: 0.35
    });

    bermudaTriangle.setMap(map);
    
    //添加点击多边形的侦听器，当点击时触发
    sogou.maps.event.addListener(bermudaTriangle, 'click', showArrays);
    
    infowindow = new sogou.maps.InfoWindow();
  }

  function showArrays(event) {

    // 获取多边形的节点坐标序列
    var vertices = this.getPath();

    var contentString = "";
    contentString += "点击位置的坐标: <br />" + event.point.x + "," + event.point.y + "<br />";

    // 遍历节点
    for (var i =0; i < vertices.length; i++) {
      var xy = vertices[i];
      contentString += "<br />" + "多边形 第: " + i + " 个节点坐标<br />" + xy.x +"," + xy.y;
    }

    // 设置信息窗位置到点击的位置
    infowindow.setContent(contentString);
    infowindow.setPosition(event.point);

    infowindow.open(map);
  }  
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

运行代码