前端vue-高德地图操作

总结一下关于高德地图的基本使用

现在高德地图改版到2.0之后都是需要key来开发，需要key的可以去开发者平台注册生成，现在社区又很多教程，这里就不进行讲解了，如果你需要更复杂的操作可以到高德地图的API上进行参考使用

你需要提前下载高德地图插件之后进行开发

所需要的网址如下

高德地图开发者平台：https://lbs.amap.com/

高德地图API地址：https://lbs.amap.com/api/jsapi-v2/guide/webcli/map-vue1

这里我采用了组件封装的方式进行使用，混合js进行开发操作

先上效果图

vue组件代码

<template><div class="gaode-map" id="container"></div>
</template><script>
import { mapJs } from './gaodeMap.js'export default {name: 'gaode-map',mixins: [mapJs]
}
</script><style lang="less" scoped>
#container {padding: 0px;margin: 0px;width: 100%;height: 100%;
}::v-deep .amap-logo {display: none!important;visibility: hidden!important;
}::v-deep .amap-copyright {display: none!important;visibility: hidden!important;
}
</style>

JS代码

// 引入高德地图插件
import AMapLoader from '@amap/amap-jsapi-loader'
import { options } from 'less'
// 编写安全密钥
window._AMapSecurityConfig = {securityJsCode: '你的安全密钥'
}
export const mapJs = {data() {return {map: null, // 初始化map     marker: null, // 声明点标记 capitals: [ // 地图圆形标记数据 - 这个数据是后端给的，这边练习随便填写{center: [116.59877, 39.932143],popNum: 4}]}},mounted() {this.initMap()},methods: {initMap(data) {AMapLoader.load({// 申请好的Web端开发者Key，首次调用 load 时必填key: "  你的key",// resizeEnable: true,// 指定要加载的 JSAPI 的版本，不写时默认为 1.4.15version: "2.0",}).then((AMap) => {var map = new AMap.Map("container", {//是否为3D地图模式viewMode: "3D",//初始化地图级别（地图的远近）  center: [116.59877, 39.932143], //地图开始展示的中心点zoom: 17, // 缩放层级});// 添加圆点标记for (var i = 0; i < this.capitals.length; i += 1) {var center = this.capitals[i].center;var circleMarker = new AMap.CircleMarker({center: center,radius: 40 + Math.random() * 10,//3D视图下，CircleMarker半径不要超过64pxstrokeColor: 'white',//边框颜色strokeWeight: 2,//边框粗细strokeOpacity: 0.5,//边框透明度fillColor: '#3096FF',//填充色fillOpacity: 0.5,//填充色透明度zIndex: 10,bubble: true,cursor: "pointer",clickable: true,});//添加圆形轨迹circleMarker.setMap(map);}// 每个圆点添加文本for (var i = 0; i < this.capitals.length; i += 1) {var text = new AMap.Text({text: this.capitals[i].popNum,anchor: "center", // 设置文本标记锚点// draggable: true, // 是否可移动文本cursor: "pointer",angle: 10,style: {"background-color": "rgba(148, 199, 252,0)",opacity: "1",// width: "100%","border-width": 0,"text-align": "center","font-size": "36px","transform":"rotate(-10deg)",color: "#fff",},position: [this.capitals[i].center[0], this.capitals[i].center[1]],});text.setMap(map);// 设置点标记的点击事件circleMarker.on('click', markerClick) // 设置点击事件function markerClick(e) {console.log(e.target);}}}).catch(e => {console.log(e); // 输出错误})},}
}

以上代码可以直接粘贴复制使用，仅供参考！

前端vue-高德地图操作相关推荐

前端vue js 高德地图实现雷达扫描加载，借鉴百度地图等方法，采用Canvas解决雷达背景透明度问题，解决Canvas动态指针扫描造成浏览器卡顿问题
前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...
Android+SpringBoot+Vue+高德地图实现后台查看车辆实时位置功能
场景通过给车辆的驾驶员的手机安装app,管理员在后台可以实时查看车辆的实时位置. 实现思路: app中集成高德地图,app启动登录后,定时地获取当前定位信息连同当前账号上传到服务器后台. 后台将获取 ...
利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...
vue 给圆遮盖物添加文字高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店由学院君创建于2年前, 最后更新于 2年前版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
常见的前端vue面试题
常见的前端vue面试题 1.请讲述下VUE的MVVM的理解? MVVM 是 Model-View-ViewModel的缩写,即将数据模型与数据表现层通过数据驱动进行分离,从而只需要关系数据模型的开发, ...
前端vue实现pdf文件的在线预览
3.前端vue实现pdf文件的在线预览我是通过 <iframe> 标签就可以满足我工作的 pdf预览需求如果<iframe> 无法满足需求 , 可以使用pdf.js这个插件 ...
vue验证整数_前端Vue中常用rules校验规则
前端Vue中常用rules校验规则 1.是否合法IP地址 export function validateIP(rule, value,callback) {if(value==''||value== ...
Spring Boot笔记-get请求发送json数据（方便前端vue解析）
目录基本概念代码与实例基本概念这里有一个思路,后端只发送Json数据,前端vue去解析.这样的话,就可以做到前后端分离,耦合性就很低了. 代码与实例程序运行截图如下: 得到后,使用vue去解 ...
vue和小程序哪个好学一点_litemall,Spring Boot后端，微信小程序用户前端 + Vue用户移动端...
litemall 又一个小商场系统. litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端注意: 由于第一次加载数据量较大,建议wif ...
Web前端-Vue.js必备框架（一）
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head><meta char ...

前端vue-高德地图操作

前端vue-高德地图操作相关推荐

最新文章

热门文章