VUE引入高德地图区域划分district结果为空

出现这种情况通过debugger,或者打印status、result结果status为no_data,而result内容也不对
当问题出现了,不要慌,先百度*****

var opts = {
   subdistrict: 0, //获取边界不需要返回下级行政区
   extensions: 'all', //返回行政区边界坐标组等具体信息
   level: 'city' //查询行政级别为 市
 };
 district = new AMap.DistrictSearch(opts);
 district.search("无锡市", (status, result) => {
   var bounds = result.districtList[0].boundaries;

   var mask = [];
   for (var i = 0; i < bounds.length; i += 1) {
     mask.push([bounds[i]]);
   }

因为有些人喜欢一步到位像下面这种

 new AMap.DistrictSearch({
    subdistrict: 0,
    extensions: "all",
    level: "city",
  }).search("无锡市", (status, result) => {
    var bounds = result.districtList[0].boundaries;
    var mask = [];
    for (var i = 0; i < bounds.length; i += 1) {
      mask.push([bounds[i]]);
    }

那可能当获取不到高德数据时会出现district: Cannot read properties of undefined (reading '0')这样的错误。
用第一种方法可以避免district未定义这样子的错误提示。
但是根本还是数据获取,现在的高德地图api需要在引用地图页面添加script 导入密钥和接口信息如下

  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: '密钥',
    }
  </script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己申请的&plugin=插件名Map3D,AMap.DistrictLayer,AMap.Scale,AMap.MarkerClusterer,AMap.DistrictSearch,AMap.ToolBar&callback=js对应方法"></script>

注意:导入密钥要在接口上面,纯顺序要求

posted @ 2022-06-28 15:31  形码客  阅读(1782)  评论(0)    收藏  举报