高德地图 Vue 中 加载 数据可视化 Loca 的方式

高德地图 Vue 中 加载 数据可视化 Loca 的方式

今天想用 Loca 试试如何的，结果怎么都加载不上，我的代码是这样的

AMapLoader.load({
            key: "这个就不展示了", // 开发应用的 ID
            version: "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: [
                'AMap.ToolBar',
                'AMap.Scale', // 比例尺
                'AMap.Geolocation',
            ],
            Loca:{
                version: '2.0',
            }

        }).then(map => {
            AMap = map
            this.map = new AMap.Map('container', {
                viewMode: '3D',
                zoom: 18,
                center: MY_POSITION,
                mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
                showBuildingBlock: true,
                showLabel: false,
            });
            this.loca = new Loca.Container({
                map: this.map,
            });
        })

结果问题提示错误，表示没有找到 Loca 这个类，找了半天，终于在对照官方文档的时候看出端倪了。

竟然是因为 Loca 的 version 写错了的问题，你敢信？

上面的 Loca 部分 版本号那里改成 2.0.0 就好了

Loca:{
    version: '2.0.0',
}

然后就可以继续下面的操作了。

官方文档，关于如何用 AMapLoader 加载 Loca 的说明，在本页的下方区域

https://lbs.amap.com/api/loca-v2/intro

关于如何使用 AMPLoader 加载高德地图的说明在这: JSAPI Loader

https://lbs.amap.com/api/jsapi-v2/guide/abc/load

我用高德 WebAPI 写的一些工具例子：

https://kylebing.cn/tools/map/

Loca 和 标记工具的页面放到这个项目中了，可以从中查看源码：

https://github.com/KyleBing/demo-map-loca