dispose
/
common


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
							<!DOCTYPE html>
<html>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>荟萃楼珠宝黑龙江省</title>
  <script>

    window._AMapSecurityConfig = {

      securityJsCode: '3526b49c1c46354a5f0676002636f360',

    };

  </script>
  <script src="https://webapi.amap.com/loader.js"></script>
  <script type="text/javascript">

    var _this = this;

    let center = [126.661998, 48.742253];

    let zoom = 6.5;

    // 引入,实例化

    AMapLoader.load({

      key: '94943af79a8a349d045c2b8645cc9db4', // 申请好的Web端开发者Key，首次调用 load 时必填

      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15

      plugins: ['AMap.PlaceSearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等

    })

      .then((AMap) => {

        var map = new AMap.Map('container', {

          center,

          zoom,

          mapStyle: 'amap://styles/88ab842bd66e2dcb61aff7f507779c45',

        });

        // 隐藏黑龙江以外的地方

        AMap.plugin('AMap.DistrictSearch', function () {

          new AMap.DistrictSearch({

            extensions: 'all',

            subdistrict: 1, // 这个是获取下面一层级的数据,获取城市

          }).search('黑龙江', function (status, result) {

            // 外多边形坐标数组和内多边形坐标数组

            // 获取城市列表

            let cityList = result.districtList[0].districtList;

            let outer = [new AMap.LngLat(-360, 90, true), new AMap.LngLat(-360, -90, true), new AMap.LngLat(360, -90, true), new AMap.LngLat(360, 90, true)];

            let holes = result.districtList[0].boundaries;

            let pathArray = [outer];

            pathArray.push.apply(pathArray, holes);

            let polygon = new AMap.Polygon({

              pathL: pathArray,

              strokeColor: 'red', //城市边界颜色

              strokeWeight: 3,

              fillColor: '#112473', // 遮罩背景色黑色

              fillOpacity: 1,

            });

            polygon.setPath(pathArray);

            map.add(polygon);

            for (let i = 0; i < cityList.length; i++) {

              const { name } = cityList[i];

              _this.setBorder(map, name, i);

            }

          });

        });

        // 查找荟萃楼的点

        _this.findPoint(map);

      })

      .catch((e) => {

        console.error(e); //加载错误提示

      });


    // 色谱

    let colors = [

      '#70F2FF',

      '#7F1CAD',

      '#F1D4E8',

      '#9D2932',

      '#54004E',

      '#00FF00',

      '#177CB0',

      '#1E90FF',

      '#000080',

      '#00FFFF',

      '#3CB371',

      '#CC99FF',

      '#FF6600',

      '#ED5736',

      '#494166',

      '#D9B612',

      '#A98175',

      '#EFDEB0',

    ];

    // 设置边界及区域多边形

    function setBorder(map, cityName, i) {

      let color = colors[i];

      AMap.plugin('AMap.DistrictSearch', function async() {

        new AMap.DistrictSearch({

          // level: 'city',

          extensions: 'all',

          subdistrict: 0,

        }).search(cityName, function (status, result) {

          // 用城市代码确定黑龙江城市

          let holes = result.districtList.map((i) => i.boundaries);

          holes = holes[0];

          // 会返回好几个数组,这些数组的点不知道是什么,但边界线一定是点最多的

          let lengthArr = holes.map((i) => i.length);

          let num = lengthArr.reduce((n1, n2) => (n1 > n2 ? n1 : n2));

          let index = lengthArr.findIndex((i) => i === num);

          let pathArray = holes[index];


          //生成行政区划的多边形

          new AMap.Polygon({

            map: map,

            path: pathArray,

            strokeWeight: 1, //轮廓线宽度

            strokeColor: 'red', //轮廓线颜色

            fillOpacity: 0.3, // 多边形透明度

            fillColor: color, // 多边形颜色

          });

        });

      });

    }

    // 添加点

    function addMarkers(map) {

      if (!map) return;

    }


    let marks = [];

    // 查询点

    function findPoint(map, pageIndex = 1) {

      // 查询 荟萃楼珠宝

      var placeSearch = new AMap.PlaceSearch({

        // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode

        city: '黑龙江',

        pageSize: 100,

        pageIndex,

        map,

        autoFitView: false,

      });

      placeSearch.search('荟萃楼珠宝', function (status, result) {

        // 查询成功时，result即对应匹配的POI信息

        let poiList = result.poiList;

        let pois = poiList.pois;

        marks.push(...pois);

        // 计算是否需要再查询

        let total = poiList.count;

        if (total > marks.length) _this.findPoint(map, pageIndex + 1);

      });

    }

  </script>
  <style>

    body {

      height: 100%;

      width: 100%;

      color: #333;

      background: #e8e8e8;

      font: 14px 'Microsoft YaHei', arial, helvetica, clean, sans-serif;

      overflow: hidden !important;

      -webkit-text-size-adjust: none;

      margin: 0 auto;

    }

    #container {

      height: 100vh;

      width: 100wh;

    }

  </style>
  <body>
    <div id="container"></div>
  </body>
</html>