带洞多边形

使用Polygon在地图上绘制带洞的多边形。

源代码编辑器

复制

运行

还原

          <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>带洞多边形</title>
    <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
    </style>
    <script src="http://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 14
    });
    var polygonOptions = {
        map: map,
        strokeColor: '#97EC71',
        strokeWeight: 2,
        fillColor: '#D1B3E3',
        fillOpacity: 0.7
    };
    // 外多边形坐标数组和内多边形坐标数组
    var pointers = {
        outer: [
            [117.104554, 30.504444],
            [117.118974, 30.506219],
            [117.12893, 30.508586],
            [117.13305, 30.511248],
            [117.139917, 30.514501],
            [117.147126, 30.518642],
            [117.153993, 30.5216],
            [117.161546, 30.526036],
            [117.171502, 30.529289],
            [117.177339, 30.531655],
            [117.184892, 30.531063],
            [117.197595, 30.533133],
            [117.212014, 30.535499],
            [117.223001, 30.536682],
            [117.233987, 30.536977],
            [117.23845, 30.538456],
            [117.240854, 30.545848],
            [117.251153, 30.543778],
            [117.251497, 30.53816],
            [117.24875, 30.530767],
            [117.246347, 30.523965],
            [117.243943, 30.515684],
            [117.241197, 30.504149],
            [117.238107, 30.493795],
            [117.229524, 30.481073],
            [117.221971, 30.474268],
            [117.215104, 30.469533],
            [117.204461, 30.466574],
            [117.190728, 30.462727],
            [117.183862, 30.464207],
            [117.156739, 30.47456],
            [117.14644, 30.47841],
            [117.140603, 30.482257],
            [117.127214, 30.485215],
            [117.107988, 30.487878]
        ],
        inner: [
            [117.162061, 30.49361],
            [117.167211, 30.49716],
            [117.172361, 30.50071],
            [117.177167, 30.505739],
            [117.184034, 30.512542],
            [117.18987, 30.522894],
            [117.2012, 30.525851],
            [117.210126, 30.527034],
            [117.219396, 30.526443],
            [117.225919, 30.527034],
            [117.234159, 30.529104],
            [117.237935, 30.528808],
            [117.235532, 30.522894],
            [117.234502, 30.516683],
            [117.232785, 30.507514],
            [117.226262, 30.491835],
            [117.217336, 30.480297],
            [117.202916, 30.4729],
            [117.194677, 30.470828],
            [117.184034, 30.473491],
            [117.177511, 30.47793],
            [117.170644, 30.484439],
            [117.167897, 30.489173]
        ]
    };
    var pathArray = [
        pointers.outer,
        pointers.inner
    ];
    var polygon = new AMap.Polygon(polygonOptions);
    polygon.setPath(pathArray);
    map.setFitView();
</script>
</body>
</html>
        

控制台

清空

示例
中心常见
问题智能
客服