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>