vue渲染高德地图

vue使用高德地图

1.使用npm安装 Loader ：

npm i @amap/amap-jsapi-loader --save

2.在template中添加标签作为容器

<template>
     <div id="map"></div>
</template>

3.设置div的样式（根据个人觉得）

4.在组件中引入 amap-jsapi-loader

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

5.在methods中初始化地图

methods:{
    initMap(){
        AMapLoader.load({
            key:"",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{
            this.map = new AMap.Map("map",{  //设置地图容器id
                viewMode:"3D",    //是否为3D地图模式
                zoom:5,           //初始化地图级别
                center:[105.602725,37.076636], //初始化地图中心点位置
            });
        }).catch(e=>{
            console.log(e);
        })
    },
},

6.在mounted中调用initMap方法渲染地图(需要在DOM 初始化完成后调用)

mounted(){
    //DOM初始化完成进行地图初始化
    this.initMap();
}