Vue加载地图的两种方法

方法一安装 vue-amap

安装 npm install vue-amap

卸载 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)

页面直接用

1.地图容器

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

2.调用

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

方法二

安装 npm install @amap/amap-jsapi-loader

卸载 npm uninstall @amap/amap-jsapi-loader

不用在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>

新建一个MapTool.js文件

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文件配置

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

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

页面引用

 <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()

官方解释：

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

Vue加载地图的两种方法

this.$nextTick()

猜你喜欢