vue在线高德地图

您所在的位置：网站首页 › Vue高德地图设置地图中心点 › vue在线高德地图

vue在线高德地图

2024-05-31 07:06| 来源: 网络整理| 查看: 265

1.申请地图的key；（具体操作看官网）

2.安装npm loader包

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

3.创建地图文件map.vue

4.设置地图的基础样式

#container{ padding:0px; margin: 0px; width: 100%; height: 800px; }

5.引入loader

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

6.在data中声明map

data(){ return{ map:null, } },

7.定义初始化map的方法

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

8.在mounted中调用map

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

9.map的插件的使用

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

在plugin中，要先定义，插件名具体在官网查找

定义之后要创建插件的实例，在map中addControl调用实例的方法；

【本文地址】

vue在线高德地图

vue在线高德地图

今日新闻

推荐新闻