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 = thisthis.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 = urldocument.head.appendChild(jsapi)},createMapTools () {const self = this// 地图id，多次调用该地图组件时，id必须动态生成self.id = `map${Math.random().toString().slice(4, 6)}`// 封装回调函数，为了防止与其他地方定义的load冲突，最好重命名，如onmaploadedwindow.onmaploaded = () => {// 地图基础控件添加，传递的第一个参数是DOM元素的idconst 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// 将创建好的地图点标记控件 添加到地图mapmarker.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_DrivingResultif (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 = thiswindow.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_DrivingResultif (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> <!-- 下面这个ui样式暂时不引入也可以 -->
<!-- <script type="text/javascript" src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></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

Vue 中使用高德地图api相关推荐

Vue中集成高德地图API实现定位与自定义样式信息窗体
场景若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在上面 ...
在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...
Vue中使用高德地图
Vue中使用高德地图定位及poi搜索,以及其他插件的使用方法 1.第一步安装 npm install vue-amap --save 2.引入vue-amap main.js import Vue f ...
Vue中使用高德地图，简单明了
一.使用步骤 1.在vue中引入高德地图的加载器 npm i @amap/amap-jsapi-loader --save 在自己的组件中去引用 <template>//这个div就是 ...
vue中引入高德地图Loca数据可视化
目录引言: 关键词: 正文: 一.如何安装或者引入: 二.如何引入: 三.如何使用: 四.完整代码: 五.效果图参考: 引言: 前面我的文章介绍了vue中引入高德地图实例的,详情可以去参考,由于需 ...
vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
Vue中使用高德地图（vue-amap）的采坑记录小白入门
这里写目录标题写在开始 step.1 安装组件 step.2 引入组件 step.3注册高德高德开发者账号,申请KEY step.4 正式使用写在开始俗话说授人以鱼不如授人以渔,直接记录代码的话 ...
在vue中使用高德地图的下属省市区查询，实现省市区的联动以及规划范围
在vue中使用高德地图的下属省市区查询,实现省市区的联动以及规划范围一.先上效果图二.高德地图Vue引用一.先上效果图二.高德地图Vue引用 1. webpack引入高德在webpack.b ...
vue中引入高德地图
❤️❤️❤️ Topology可视化绘图引擎 ❤️❤️❤️ 总的来说,vue组件中使用高德地图的方式有两种,一种是vue-amap :一套专门用于vue的高德地图插件:另外一种是原生的高德地图. 方式 ...

Vue 中使用高德地图api

比较简单的原生方式

代码比较简洁好用的原生高德地图api

Vue 中使用高德地图api相关推荐

最新文章

热门文章