高德地图 AMapUI is not defined

Question

高德地图【UI组件库】高级功能。需要引用main.js
里面是用require.js加载。

当加载后。一直刷新网页。就会出这个异常。

http://lbs.amap.com/api/javas...

这是官方文档链接，就是跟着这个配置的

Answer 1

真传一句话，假传一本书。。 用以下得方式定义就不会报错了

AMapLoader.load({
    "key": "",              // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    "plugins": []           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
        "version": '1.1',   // AMapUI 缺省 1.1
        "plugins":[],       // 需要加载的 AMapUI ui插件
    },
    "Loca":{                // 是否加载 Loca， 缺省不加载
        "version": '1.3.2'  // Loca 版本，缺省 1.3.2
    },
}).then(()=>{
    window.AMap.xx;
    window.AMapUI.xx;
    window.Loca.xx
})

Answer 2

出现这个问题,就是https://webapi.amap.com/ui/1.... js 文件未加载完成,
解决方案来个传送门:解决AMapUI is not defined

Answer 3

楼上作者“爱代码三千”真的很厉害！如下代码可以成功引入！

"plugins": []           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
AMapUI: { 
  version: '1.1', // AMapUI 缺省 1.1
  plugins: ["misc/MobiCityPicker"]，//注意这里插件的引入形式写法
},
"Loca":{                // 是否加载 Loca， 缺省不加载
    "version": '1.3.2'  // Loca 版本，缺省 1.3.2
},

然后在点击方法里面：

fujin() {
  //设置DomLibrary
  AMapUI.setDomLibrary(Zepto);

  //加载MobiCityPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
  AMapUI.loadUI(['misc/MobiCityPicker'], function(MobiCityPicker) {

      var cityPicker = new MobiCityPicker({
          //topGroups: ..., // 顶部城市列表
      });

      //监听城市选中事件
      cityPicker.on('citySelected', function(cityInfo) {
          //隐藏城市列表
          cityPicker.hide();

          //选中的城市信息
          console.log(cityInfo);
          //这样就可以打印出来了
      });

      //显示城市列表，可以用某个click事件触发
      cityPicker.show();
  });
},