位置: IT常识 - 正文

vue项目中使用高德地图(vue中使用gojs)

编辑:rootadmin
vue项目中使用高德地图

推荐整理分享vue项目中使用高德地图(vue中使用gojs),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue 使用,vue 使用,vue高级技巧,vue在项目中怎么用的,vue高级技巧,vue在项目中怎么用的,vue 高级用法,vue 高级用法,内容如对您有帮助,希望把文章链接给更多的朋友!

最近做的项目中有个地图选择的功能,如下图所示:

所以在此记录下使用方法,望各位大神指导

我的应用 | 高德控制台第一步:去高德官网去创建一个属于自己的地图应用 (得到key和秘钥)我的应用 | 高德控制台

 这是添加的方式:

vue项目中使用高德地图(vue中使用gojs)

准备-入门-教程-地图 JS API | 高德地图API

第二步:获取到属于自己的key和秘钥后,下载地图高德:npm install vue-amap --save 

第三步:在main.js中导入 

VueAMap.initAMapApiLoader({ key: '你申请的key', plugin: [ 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder', 'AMap.DrivingPolicy', 'AMap.Driving', "AMap.Autocomplete", "AMap.PolyEditor", "AMap.CircleEditor", ], v: '1.4.4', uiVersion: '1.0',})

这里的key是你申请的

第四步:在index.html页面头部 添加秘钥

​​​​​​​​​​​​​​

<script type="text/javascript"> window._AMapSecurityConfig = { securityJsCode: "你申请的秘钥", } </script>

 以上步骤完成后,就可以去你对应的页面中使用了

因为我是写的一个组件,所以大家根据自己的情况 

我的组件完整代码:

<template> <div class="container"> <div class="search-box"> <el-row> <el-col :span="16"> <el-input v-model="searchKey" id="search" placeholder="请输入地址信息"></el-input> </el-col> <el-col :span="6"> <el-button type="success" plain @click="searchByHand" style="margin-left:20px">搜索位置</el-button> </el-col> </el-row> <div class="tip-box" id="searchTip"></div> </div> <el-amap class="amap-box" :amap-manager="amapManager" :vid="'amap-vue'" :zoom="zoom" :plugin="plugin" :center="center" :events="events"> <!-- 标记 --> <el-amap-marker v-for="(marker, index) in markers" :position="marker" :key="index"></el-amap-marker> </el-amap> </div></template><script>import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap'let amapManager = new AMapManager()export default { data() { let self = this return { address: null, searchKey: '', amapManager, markers: [], searchOption: { city: '全国', citylimit: true }, center: [108.872249, 34.33328], zoom: 10, lng: 0, lat: 0, loaded: false, markerEvent: { click(e) { // console.log(e); } }, mapInfo: { lng: '', lat: '', mapText: '' }, events: { init() { lazyAMapApiLoaderInstance.load().then(() => { self.initSearch() }) }, // 点击获取地址的数据 click(e) { self.markers = [] let { lng, lat } = e.lnglat self.lng = lng self.lat = lat self.center = [lng, lat] self.markers.push([lng, lat]) // 这里通过高德 SDK 完成。 let geocoder = new AMap.Geocoder({ radius: 1000, extensions: 'all' }) geocoder.getAddress([lng, lat], function (status, result) {//点击地图显示位置信息 if (status === 'complete' && result.info === 'OK') { if (result && result.regeocode) { if (result.regeocode.crosses.length > 0) { self.mapInfo.lng = result.regeocode.crosses[0].location.lng self.mapInfo.lat = result.regeocode.crosses[0].location.lat } if (result.regeocode.crosses.length > 0) { self.mapInfo.lng = result.regeocode.pois[0].location.lng self.mapInfo.lat = result.regeocode.pois[0].location.lat } self.mapInfo.mapText = result.regeocode.formattedAddress // console.log('地图组件中点击选中的地址为',self.mapInfo) if (self.mapInfo.lng !== '' && self.mapInfo.lat !== '') { self.$store.state.addersInfo = JSON.stringify(self.mapInfo) } console.log(self.lng, self.lat, "33333333333333333") self.address = result.regeocode.formattedAddress self.searchKey = result.regeocode.formattedAddress self.$nextTick() } } }) } }, // 一些工具插件 plugin: [ { // 定位 pName: 'Geolocation', events: { init(o) { // o是高德地图定位插件实例 o.getCurrentPosition((status, result) => { if (result && result.position) { // 设置经度 self.lng = result.position.lng // 设置维度 self.lat = result.position.lat // 设置坐标 self.center = [self.lng, self.lat] self.markers.push([self.lng, self.lat]) // load self.loaded = true // 页面渲染好后 self.$nextTick() } }) }, click(e) { // console.log(e); } } }, { // 工具栏 pName: 'ToolBar', events: { init(instance) { // console.log(instance); } } }, { // 鹰眼 pName: 'OverView', events: { init(instance) { // console.log(instance); } } }, { // 地图类型 pName: 'MapType', defaultType: 0, events: { init(instance) { // console.log(instance); } } }, { // 搜索 pName: 'PlaceSearch', events: { init(instance) { // console.log(instance) } } } ] } }, created() { this.searchKey = JSON.parse(this.$store.state.addersInfo).mapText; }, watch: { "$store.state.addersInfo": { handler: function (newVal, oldVal) { this.searchKey = JSON.parse(newVal).mapText; }, deep : true }, searchKey(addersText) { if (addersText == '') { this.$store.state.addersInfo = '' } } }, methods: { // submitAddress() {//确定事件 // console.log('经纬度', this.center) // console.log('地址', this.address) // this.mapInfo.lng = this.center[0] // this.mapInfo.lat = this.center[1] // this.mapInfo.mapText = this.address // // console.log(this.mapInfo) // this.$store.state.address = JSON.stringify(this.mapInfo) // }, initSearch() { let vm = this let map = this.amapManager.getMap() AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) { var poiPicker = new PoiPicker({ input: 'search', placeSearchOptions: { map: map, pageSize: 10 }, suggestContainer: 'searchTip', searchResultsContainer: 'searchTip' }) console.log(poiPicker, "***********") vm.poiPicker = poiPicker // 监听poi选中信息 poiPicker.on('poiPicked', function (poiResult) { let source = poiResult.source let poi = poiResult.item if (source !== 'search') { poiPicker.searchByKeyword(poi.name) } else { poiPicker.clearSearchResults() vm.markers = [] let lng = poi.location.lng let lat = poi.location.lat let address = poi.cityname + poi.adname + poi.name vm.center = [lng, lat] // console.log(vm.center) vm.markers.push([lng, lat]) vm.lng = lng vm.lat = lat vm.address = address vm.searchKey = address // console.log(vm.address) vm.mapInfo.lng = lng vm.mapInfo.lat = lat vm.mapInfo.mapText = vm.address // console.log(vm.mapInfo) vm.$store.state.addersInfo = JSON.stringify(vm.mapInfo) } }) }) }, searchByHand() {//点击搜索事件 if (this.searchKey !== '') { this.searchKey = JSON.parse(this.$store.state.addersInfo).mapText; this.poiPicker.searchByKeyword(this.searchKey) } } },}</script><style lang="scss" scoped>.container { width: 100%; height: 500px;}.search-box { position: absolute; z-index: 5; width: 100%; left: 13%; top: 10px; height: 30px; border: none !important;}.tip-box { width: 73%; max-height: 260px; position: absolute; top: 42px; overflow-y: auto; background-color: #fff;}</style>

里面都有对应的注释

本文链接地址:https://www.jiuchutong.com/zhishi/283340.html 转载请保留说明!

上一篇:pavupg.exe是什么进程 pavupg进程查询(pnaico.exe是什么软件)

下一篇:ReadTimeoutError: HTTPSConnectionPool(host=‘cdn-lfs.huggingface.co‘, port=443)

  • 抖音识别字幕怎么用(抖音识别字幕怎么修改)

    抖音识别字幕怎么用(抖音识别字幕怎么修改)

  • qq资料验证一直不成功(qq资料验证一直失败怎么办)

    qq资料验证一直不成功(qq资料验证一直失败怎么办)

  • airpods二代没有弹窗(airpods二代没有指示灯)

    airpods二代没有弹窗(airpods二代没有指示灯)

  • 手机有必要贴钢化膜吗(手机有必要贴吗)

    手机有必要贴钢化膜吗(手机有必要贴吗)

  • iphone屏幕左侧阴影竖线(iphone屏幕左侧阴影竖线从来没有更新过)

    iphone屏幕左侧阴影竖线(iphone屏幕左侧阴影竖线从来没有更新过)

  • qq里发什么才会掉星星(qq上发什么)

    qq里发什么才会掉星星(qq上发什么)

  • 华为nova7se卡槽在哪里(华为nova7se卡槽怎么打开视频)

    华为nova7se卡槽在哪里(华为nova7se卡槽怎么打开视频)

  • 阿里淘小铺是什么时候成立的啊(阿里巴巴淘小铺是什么)

    阿里淘小铺是什么时候成立的啊(阿里巴巴淘小铺是什么)

  • 腾讯会议中途离开有记录吗(腾讯会议中途离开主持人会知道是谁吗)

    腾讯会议中途离开有记录吗(腾讯会议中途离开主持人会知道是谁吗)

  • 为什么往群里发不了红包(为什么往群里发文件发不出去)

    为什么往群里发不了红包(为什么往群里发文件发不出去)

  • 微信公众号被永久封禁以后会自动注销吗(微信公众号被永久封号了,还能注册吗?)

    微信公众号被永久封禁以后会自动注销吗(微信公众号被永久封号了,还能注册吗?)

  • 大王卡突然不免流了(大王卡突然不免流怎么回事)

    大王卡突然不免流了(大王卡突然不免流怎么回事)

  • 苹果手机下载需要验证是怎么回事(苹果手机下载需要密码怎么设置)

    苹果手机下载需要验证是怎么回事(苹果手机下载需要密码怎么设置)

  • 5v2.4a是快充吗(5v-2.4a是快充吗)

    5v2.4a是快充吗(5v-2.4a是快充吗)

  • 微信显示1条信息但不知道在哪(微信显示有1条信息却看不到)

    微信显示1条信息但不知道在哪(微信显示有1条信息却看不到)

  • 信息图标有个感叹号(信息图标有一个感叹号)

    信息图标有个感叹号(信息图标有一个感叹号)

  • 导航卫星的作用是什么(导航卫星的作用是答案)

    导航卫星的作用是什么(导航卫星的作用是答案)

  • sdk初始化什么意思(sdk初始化什么意思失败)

    sdk初始化什么意思(sdk初始化什么意思失败)

  • word文档把数字统一字体(word文档把数字竖着打怎么弄)

    word文档把数字统一字体(word文档把数字竖着打怎么弄)

  • iphone gps设置在哪里(ios gps设置)

    iphone gps设置在哪里(ios gps设置)

  • 苹果7p电池容量有多大(苹果7P电池容量是多少)

    苹果7p电池容量有多大(苹果7P电池容量是多少)

  • 华为mate30可以同时上两个微信吗(华为mate30能相互充电吗)

    华为mate30可以同时上两个微信吗(华为mate30能相互充电吗)

  • 乐视2怎样截屏(乐视手机怎么截屏幕图)

    乐视2怎样截屏(乐视手机怎么截屏幕图)

  • 坚果pro3支持存储卡扩展吗(坚果pro支持内存卡吗)

    坚果pro3支持存储卡扩展吗(坚果pro支持内存卡吗)

  • 红袖读书怎么免费(红袖读书怎么免费的会员)

    红袖读书怎么免费(红袖读书怎么免费的会员)

  • 在计算机的硬件技术中构成存储器的最小单位是(在计算机的硬件中输入设备有什么什么什么)

    在计算机的硬件技术中构成存储器的最小单位是(在计算机的硬件中输入设备有什么什么什么)

  • a7x电池容量(a79电池容量)

    a7x电池容量(a79电池容量)

  • 华为glkal00是什么型号(华为glkaloo是啥手机)

    华为glkal00是什么型号(华为glkaloo是啥手机)

  • ipada1432配置参数(ipada1432是几寸的)

    ipada1432配置参数(ipada1432是几寸的)

  • 住房租金专项附加
  • 货物运输费用怎么算
  • 股东借款怎么转为利润分配
  • 电子发票可以更改备注吗
  • 公司销售固定资产汽车如何填申报表
  • 高速公路上的机电一体化有哪些
  • 网上车辆购置税缴纳
  • 哪些企业可以享受加计扣除优惠政策?
  • 向公司一般户的银行借款怎么做账?
  • 汽车以租代售合法吗
  • 子公司打钱给母公司
  • 城建税当月缴纳要计提吗
  • 少缴纳个人所得税的需要付什么责任
  • 建设工程农民工工资支付条例
  • 个人是否可以开展募捐
  • 某物业公司组织工人进入下水道
  • 外购货物用于职工福利企业所得税怎么调整
  • 小规模纳税人少计提的工资怎么办
  • 主营业务收入增速怎么算
  • 贸易公司补交所得税怎么做账?
  • 一般纳税人交税标准是多少
  • 购入商品款项尚未入库
  • 筹建期的餐饮费会计分录
  • 应收账款少给货款怎么做分录?
  • 诉讼费计入哪里
  • 如果在XP系统中QQ音乐听不了怎么办?
  • 高新技术研发人员比例
  • windowsmodulesinstaller占用cpu
  • 固定资产应怎么做账
  • 应付票据贴现息计入
  • Win11截图工具怎么设置快捷键
  • 公司奖金没有按时发可以要吗
  • php字符串定义的三种方式
  • 勃艮第蜗牛干红葡萄酒
  • 认知度高的人
  • 金融企业允许税前扣除的准备金
  • 蒙特利尔 攻略
  • 小企业固定资产折旧方法包括
  • zendframework3中文手册
  • 其他资本公积如何转出
  • 飞机票电子发票能报销吗
  • 施工单位代建收费合法吗
  • 年度一次性奖励扣税
  • 主营营业成本会计分录
  • 月底主营业务成本会计分录
  • 销售租赁服务税率
  • 交易性金融资产的账务处理
  • 个体户所得税税率多少
  • 购入固定资产的现金流量项目
  • 股权转让印花税减半征收政策
  • 以前年度损益调整会计分录
  • 借款利息如何支付
  • 研发费用和研发支出的会计处理
  • 从业人数和资产总额指标,应按企业
  • 什么叫建账
  • windows2003远程桌面服务
  • 在linux操作系统中,/etc/rc.d/init.d
  • fedora安装apt
  • cmd命令start命令
  • linux常用的几种压缩工具
  • win10下安装office2007
  • centos6 iptables配置
  • win7桌面快捷方式图标没箭头
  • win10系统怎么调整输入法
  • window10使用ie8
  • win10系统怎么设置屏幕保护
  • 你可能不知道的中融新大
  • opengl示例
  • [个人学习笔记]Android 从网络获取json并解析 --Demo
  • perl中qw
  • python算法具有哪五个性质
  • 脚本被删除
  • 猫的所有视频
  • jquery提供了三种删除节点的方法,分别是什么
  • javascript字符
  • 简述javascript的主要特点
  • 税务局每月征期是什么时候
  • 内蒙古税务局发票认证
  • 税票开户银行怎么填写?
  • 出口增加为什么汇率会增加
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设