Vue 中使用高德地图api
比较简单的原生方式
<template>
<div style="margin: 0px;padding: 0px">
<div id="panel">div>
<div
:id="mapId"
style="width:100%;height:80vh"
class="m-map"/>
<a-button @click="buildMarker">添加标记a-button>
<a-button @click="buildTools">添加工具栏a-button>
<a-button @click="buildDriving">路线规划a-button>
div>
template>
<script>
export default {
data () {
return {
mapId: 'mapId', // 地图id，多次调用该地图组件时，id必须动态生成
map: null
}
},
watch: {
// 经纬度
point: function (val) {
this.map.setCenter(val)
this.marker.setPosition(val)
}
},
mounted () {
},
created () {
console.log('create begin')
this.createMap()
console.log('create end')
},
methods: {
createMap () {
const _this = this
this.mapId = `map${Math.random().toString().slice(4, 6)}`
window.onMapLoad = function () {
console.log('window.AMap', window.AMap)
const map = new window.AMap.Map(_this.mapId, {
resizeEnable: true, // resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 11, // zoom:11, //初始化地图层级
center: [ 116.397428, 39.90923 ]// center: [116.397428, 39.90923] //初始化地图中心点
})
_this.map = map
}
const url = 'https://webapi.amap.com/maps?v=1.4.15&key=你的Key&callback=onMapLoad'
const jsapi = document.createElement('script')
jsapi.charset = 'utf-8'
jsapi.src = url
document.head.appendChild(jsapi)
},
createMapTools () {
const self = this
// 地图id，多次调用该地图组件时，id必须动态生成
self.id = `map${Math.random().toString().slice(4, 6)}`
// 封装回调函数，为了防止与其他地方定义的load冲突，最好重命名，如onmaploaded
window.onmaploaded = () => {
// 地图基础控件添加，传递的第一个参数是DOM元素的id
const map = new window.AMap.Map(self.id, {
// resizeEnable: true, //是否监控地图容器尺寸变化
// zoom:11, //初始化地图层级
// center: [116.397428, 39.90923] //初始化地图中心点
resizeEnable: true,
zoom: 11,
center: self.point
})
// 地图图面
self.map = map
// 同时引入工具条插件
window.AMap.plugin(['AMap.ToolBar', 'AMap.Driving'], () => {
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
const toolbar = new window.AMap.ToolBar()
map.addControl(toolbar)
// 创建地图点标记：
const marker = new window.AMap.Marker({
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
position: self.point
})
self.marker = marker
// 将创建好的地图点标记控件 添加到地图map
marker.setMap(map)
console.log('----------------------')
// 构造路线导航类
var driving = new window.AMap.Driving({
map: map,
panel: 'panel'
})
// 根据起终点名称规划驾车导航路线
driving.search([
{ keyword: '北京市地震局(公交站)', city: '北京' },
{ keyword: '亦庄文化园(地铁站)', city: '北京' }
], function (status, result) {
// result 即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === 'complete') {
console.success('绘制驾车路线完成')
} else {
console.error('获取驾车数据失败：' + result)
}
})
})
}
},
buildMarker () {
var marker = new window.AMap.Marker({
position: new window.AMap.LngLat(116.39, 39.9),
title: '北京'
})
this.map.add(marker)
},
buildTools () {
window.AMap.plugin(['AMap.ToolBar'], () => { // 同时引入工具条插件
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
const toolbar = new window.AMap.ToolBar()
this.map.addControl(toolbar)
})
},
buildDriving () {
const _this = this
window.AMap.plugin(['AMap.Driving'], () => {
var driving = new window.AMap.Driving({
map: _this.map,
panel: 'panel'
})
// 根据起终点名称规划驾车导航路线
driving.search([
{ keyword: '北京市地震局(公交站)', city: '北京' },
{ keyword: '亦庄文化园(地铁站)', city: '北京' }
], function (status, result) {
// result 即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === 'complete') {
console.log('绘制驾车路线完成')
} else {
console.log('获取驾车数据失败：' + result)
}
})
})
}
}
}
script>
<style>
style>
代码比较简洁好用的原生高德地图api
1、在根目录 public 文件夹下的 index.html 中加入
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=你申请的key">script>
2、在 vue.config.js 文件中配置 externals
module.exports = {
devServer: {
port: 57103 // 端口号配置
},
configureWebpack: {
externals: {
'AMap': 'AMap' // 高德地图配置
}
}
}
注： vue.config.js 文件要自己创建，vue-cli 3.0 不会自动生成此文件。 此外，修改 vue.config.js 不会触发热加载，也就是修改之后你需要重新 run 一下你的项目，它才能生效。
3、实际使用
<template>
<div class="box">
<div id="container" style="width: 100%;height: 800px">div>
div>
template>
<script>
import AMap from 'AMap' // 引入高德地图
export default {
mounted () {
this.init()
},
methods: {
init () {
const dom = document.getElementById('amapArea');
this.map = new AMap.Map(dom, {
resizeEnable: true,
zoom: 10,
center: [116.397428, 39.90923],
showLabel: false //不显示地图文字标记, 终于可以配置了TAT
});
}
}
}
script>
注：init() 方法请在 mounted 生命周期中调用，因为如果在 created 阶段调用，会找不到 html 元素 div#container
4、效果图
5、剩下的就可以在html中使用高德地图api地图一样了
参考文章：
https://juejin.cn/post/6964668556071927839
https://www.cnblogs.com/similar/p/11050455.html