Use AutoNavi Map in VUE-Load on Demand

1 First use npm to download and install
npm install vue-amap --save

2 First, you need a container to hold the map

The container needs to set a height (need to be absolutely positioned)

html,
body,
#map{
width: 100%;
height: 100%;
margin: 0px;
font-size: 13px;

.amap-map{
    width: 1280px;
    height: 100%;
    position: absolute;
    top: 0;
}

}

Since the requirements of this project are on-demand loading,

First of all, in webpack.base.conf.js,
you must require,

externals: [
require(‘webpack-require-http’)
],

Secondly, just import the high German map
in the page you need . Load the high German map in
beforeMount() beforeMount() { require([ “ https://webapi.amap.com/maps?v=1.4.9&key= The key value you applied for " ], () => { setTimeout(() => { var map = new AMap.Map("container", { resizeEnable: true, //Whether to monitor the change of the map container size zoom: 10, / /Initialize the map level center: [116.397428, 39.90923], //Initialize the map center point isCustom: true, //Use a custom form touchZoom: true, scrollWheel: true }); }, 1500); }); } Note: Here, there is no need to import the page that needs to load the map. Repeated introduction. Repeated introduction of error. AMap is not defined.