Two ways for Vue to load maps

Method 1 Install vue-amap

Install npm install vue-amap

Uninstall npm uninstall vue-amap-abc

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>控制台</title>
  <script src=./static/AppSetting.js type=text/javascript></script>
</head>

<body>
  <div id="app"></div>
</body>
 
<script src="https://webapi.amap.com/maps?v=2.0&key=申请的key&plugin=AMap.PolygonEditor,AMap.MouseTool"></script>

</html>

main.js

import VueAMap from 'vue-amap'
VueAMap.initAMapApiLoader({
  key: '申请的key', //高德的key（自己申请）
  plugin: ['AMap.InfoWindow', 'AMap.Autocomplete',
           'AMap.PlaceSearch','AMap.Scale',
           'AMap.OverView','AMap.ToolBar', 
           'AMap.MapType','AMap.PolyEditor',
           'AMap.CircleEditor','AMap.Geolocation','AMap.MouseTool'],//引用的插件（根据需要引入）
  uiVersion: '1.1',//UI库 版本
  v: '2.0', //高德SDK 版本
});
Vue.use(VueAMap)

Use the page directly

1. Map container

  <div id="addrailmap" style="width:1500px;height:700px"></div>
  <input type="radio" name='func' value='polygon'>

2. call

 mounted(){
    this.initaddrailmap();
  },
  methods: {
    initaddrailmap(){
         this.$nextTick(function () {
            this.map = new window.AMap.Map("addrailmap", {
              resizeEnable: true,
              center: this.centerArr,
              zoom: 11
            });)
         });
    },
}

Method Two

Install npm install @amap/amap-jsapi-loader

Uninstall npm uninstall @amap/amap-jsapi-loader

No need to quote in index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>控制台</title>
  <script src=./static/AppSetting.js type=text/javascript></script>
</head>

<body>
  <div id="app"></div>
</body>
</html>

Create a new MapTool.js file

import AMapLoader from "@amap/amap-jsapi-loader";

/**
 * 初始配置地图信息
 */
export function aMapLoader() {
    return new Promise((resolve, reject) => {
        AMapLoader.load({
            key:AmapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: [
                "AMap.InfoWindow",
                "AMap.Autocomplete",
                "AMap.PlaceSearch",
                "AMap.Scale",
                "AMap.OverView",
                "AMap.ToolBar",
                "AMap.MapType",
                "AMap.PolyEditor",
                "AMap.CircleEditor",
                "AMap.Geolocation",
                "AMap.Geocoder",
                "AMap.Polygon",
                "AMap.PolygonEditor",
                "AMap.DistrictSearch",
                'AMap.Driving',
                'AMap.MouseTool',
            ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            AMapUI: {
                // 是否加载 AMapUI，缺省不加载

                version: "1.1", // AMapUI 缺省 1.1
                plugins: [
                    "misc/PathSimplifier"], // 需要加载的 AMapUI ui插件
            }
        }).then((rAMap) => {
            resolve(rAMap);
        }).catch(e => {
            console.log(e)
            resolve(null);
        });
    })
}

AppSetting.js file configuration

 //高德key
    var AmapKey = '申请的key';

    window._AMapSecurityConfig = {
        //serviceHost: '',
        securityJsCode: '申请的安全密钥',
    }

page reference

 <div id="addrailmap" style="width:1330px;height:730px"></div>
 <input type="radio" name='func' value='polygon'>

import { aMapLoader} from "@/model/MapTool";
var AMap = {};
export default{
data(){
   return{
         map: {},
         centerArr:  [106.54801, 29.553793], //中心点
    };
},
mounted(){
     aMapLoader().then((data)=>{
        AMap = data;
        that.initaddrailmap();
    });
},
 methods: {
     initaddrailmap(){
         this.$nextTick(function () {
            this.map = new window.AMap.Map("addrailmap", {
              resizeEnable: true,
              center: this.centerArr,
              zoom: 11
            });)
         });
    },
},

this.$nextTick()

Official explanation:

Defers the callback until after the next DOM update cycle. Use it immediately after modifying the data, then wait for the DOM to update. It is the same as the global method Vue.nextTick, the difference is that the this of the callback is automatically bound to the instance that called it.

Two ways for Vue to load maps

this.$nextTick()

Guess you like