1500字范文 > vue项目使用vue-amap调用高德地图api详细步骤

vue项目使用vue-amap调用高德地图api详细步骤

时间：2020-08-13 17:01:48

想要的效果如下：

高德地图 && 信息窗体

步骤一：

申请高德key

高德开放平台 | 高德地图API ()

(可参考博客： [996]如何申请高德地图用户Key_周小董的博客-CSDN博客_高德开发者平台申请key)

步骤二：

npm安装

npm install vue-amap --save

步骤三：

main.js中挂载vue-amap

// 引入高德地图import VueAMap from "vue-amap";Vue.use(VueAMap);// 初始化vue-amapVueAMap.initAMapApiLoader({// 高德的keykey: "8bcd5d53aee035144d261kkkegeigego", //换成你自己的key,这是我随便写的// 插件集合plugin: ["AMap.Autocomplete","AMap.PlaceSearch","AMap.Scale","AMap.OverView","AMap.ToolBar","AMap.MapType","AMap.PolyEditor","AMap.CircleEditor",],// 高德 sdk 版本，默认为 1.4.4v: "1.4.4",});

步骤四：

组件用法

<template><div class="mapBox"><el-amap vid="amapDemo" :zoom="zoom" :center="center" style="height: 600px"><el-amap-markerv-for="marker in markers":position="marker.position":events="marker.events":key="marker.index"></el-amap-marker><el-amap-info-windowv-for="window in windows":offset="window.offset":position="window.position":content="window.content":open="window.open":key="window.index"></el-amap-info-window></el-amap></div></template><script>export default {components: {},data() {return {unit: "xxxxx政府司法局",address: "xx省xx市xxxxx大道东433号",markers: [],windows: [],center: [116.407387, 39.904179],zoom: 16,// label: {// // content: "自定义标题",// offset: [10, 12],// },};},mounted() {this.initMap();},methods: {// 初始化地图initMap(map) {this.markers.push({position: [116.407387, 39.904179],});this.windows.push({position: [116.407387, 39.904179],content:"<h2 style='font-weight: bold;width: 400px;margin: 10px'>" +this.unit +"</h2>" +"<div style='margin: 10px'>" +"地址：" +this.address +"</div>",offset: [0, -20],open: true,});// var map = new AMap.Map("container", {// zoomEnable: true, //是否禁止缩放// zoom: 12, //缩放比例// dragEnable: false, //禁止拖动// cursor: "hand", // 鼠标在地图上的表现形式，小手// });// // 初始化工具条// map.plugin(["AMap.ToolBar"], function () {// map.addControl(new AMap.ToolBar());// });},},};</script><style lang="scss" scoped>.mapBox {position: relative;width: 100%;height: 600px;}</style>

补充：