在使用高德地图的amap-jsapi-loader的情况下如何加载出地铁地图

Question

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 1

我们需要加载AMap.MapType.Product.subway地图即可。

首先，我们引入amap-jsapi-loader

import AMapJSLoader from 'amap-jsapi-loader';

然后，我们需要调用 AMapJSLoader.load() 方法来加载AMap的地图资源

AMapJSLoader.load({
    key: 'YOUR_AMAP_KEY',
    plugins: ['AMap.MapType'],
}).then((AMap) => {
  //添加地铁地图
  AMap.mapType.product.subway(map);
}).catch(e => {
    console.error(e);
});

最后，添加地图到页面中

map = new AMap.Map('container', {
    center: [116.33387, 39.9366],
    zoom: 13,
});

这样，就可以成功加载出地铁地图了。