位置: 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)

  • 解密利用微博推广和赚钱的九种方法(解密利用微博推广的方法)

    解密利用微博推广和赚钱的九种方法(解密利用微博推广的方法)

  • 微信钱包的查看方法是什么(微信钱包查看密码)

    微信钱包的查看方法是什么(微信钱包查看密码)

  • reno4屏幕多大(oppo reno4手机参数)

    reno4屏幕多大(oppo reno4手机参数)

  • 腾讯视频qq登录闪退怎么回事(腾讯视频qq登录怎么绑定手机号)

    腾讯视频qq登录闪退怎么回事(腾讯视频qq登录怎么绑定手机号)

  • 手环作用(手环作用大吗)

    手环作用(手环作用大吗)

  • 互联网最初用在什么方面(互联网最初用在商业还是军事方面)

    互联网最初用在什么方面(互联网最初用在商业还是军事方面)

  • 微信自动关闭是什么原因(微信 自动关闭)

    微信自动关闭是什么原因(微信 自动关闭)

  • 抖音直播一定要加入公会吗(抖音直播一定要1000人以上吗)

    抖音直播一定要加入公会吗(抖音直播一定要1000人以上吗)

  • 陌陌互相关注多久可以视频(陌陌互相关注多久可以语音视频)

    陌陌互相关注多久可以视频(陌陌互相关注多久可以语音视频)

  • 拼多多怎么没有退货包运费了(拼多多怎么没有购物车)

    拼多多怎么没有退货包运费了(拼多多怎么没有购物车)

  • ppt竖排文字怎么设置(ppt竖排文字怎么居中)

    ppt竖排文字怎么设置(ppt竖排文字怎么居中)

  • 钉钉都能监控什么(钉钉有监控系统吗)

    钉钉都能监控什么(钉钉有监控系统吗)

  • 苹果电脑错误删除了软件怎么办(苹果电脑错误删除怎么办)

    苹果电脑错误删除了软件怎么办(苹果电脑错误删除怎么办)

  • 找不到指定的模块是什么意思(找不到指定的模块是什么情况)

    找不到指定的模块是什么意思(找不到指定的模块是什么情况)

  • ps属性栏怎么调出来(ps属性栏在哪里打开)

    ps属性栏怎么调出来(ps属性栏在哪里打开)

  • 手机网易云怎么发动态(手机网易云怎么上传云盘)

    手机网易云怎么发动态(手机网易云怎么上传云盘)

  • 文档怎么用文件方式发送(文档怎么文件的形式发给别人)

    文档怎么用文件方式发送(文档怎么文件的形式发给别人)

  • 苹果11后台怎么打开

    苹果11后台怎么打开

  • 小米4手环怎么关机(小米4手环怎么调节时间)

    小米4手环怎么关机(小米4手环怎么调节时间)

  • vivox27的ai键有什么用(vivox27旁边的ai键怎么给打开)

    vivox27的ai键有什么用(vivox27旁边的ai键怎么给打开)

  • qq怎么关闭更感兴趣(怎么关闭qq自动更新功能)

    qq怎么关闭更感兴趣(怎么关闭qq自动更新功能)

  • 抖音怎么制作20张照片(抖音怎么制作20张图片)

    抖音怎么制作20张照片(抖音怎么制作20张图片)

  • iphone6plus电池容量(iphone6plus手机电池容量)

    iphone6plus电池容量(iphone6plus手机电池容量)

  • Linux系统中查杀僵尸进程的基本方法讲解(linux查杀webshell)

    Linux系统中查杀僵尸进程的基本方法讲解(linux查杀webshell)

  • 私车公用如何处理
  • 年度企业所得税做账会计分录
  • 内蒙古注册税务师协会
  • 收到税务局税收返还
  • 个人所得税租赁费的计算
  • 餐饮注册个体工商户还是注册公司
  • 残疾人加计扣除政策文件
  • 商贸企业产值含税吗
  • 签劳务合同需要什么资质
  • 资产负债表里的固定资产是原值还是净值
  • 企业的现金流量表反映的是什么
  • 未支付的货款属于什么会计科目
  • 货币资金包括应收票据和应收账款吗
  • 收到费用发票入账后发现错误
  • 将承兑汇票背书怎么操作
  • 收到厂家的销售返利 税收
  • 行政事业单位培训伙食补助报销规定
  • 公司购买的绿植普票怎么抵扣
  • 会务费发票税点是多少
  • 财务费用应计入什么账户
  • 体育用品怎么才能买到
  • 汽车运输增值税专用发票多少税点
  • 公司没有实缴可以破产么
  • 升级设备属于什么科目
  • 是否所有监控设备都录像
  • printnow.exe - printnow是什么进程 有什么作用
  • 主营业务成本的二级科目有哪些
  • 在建工程会计账务处理是否有利润表
  • 兼职属于劳动关系还是雇佣
  • php中this和self的区别
  • 公司之间债务转让合法吗
  • 销售返利应该怎么做账
  • php数组函数,选班长
  • php r
  • php加入图片代码
  • 企业的存货采用计划成本核算,某年年末,结
  • 外籍人员工资薪金扣除
  • 温哥华瀑布
  • anaconda的虚拟环境的作用
  • php扩展开发参考手册
  • 扩散分类
  • 常用激活函数及其导数
  • PyTorch深度学习实战 | 基于ResNet的人脸关键点检测
  • thinkphp跨域请求
  • rm -rf/指令指删除什么
  • 装修费摊销的分录是什么
  • 公司租赁车辆的保险费可以扣除
  • phpcms文档
  • 爬虫技术是做什么的
  • 现金溢余涉及的科目
  • 税务申报残保金
  • PostgreSQL教程(十四):数据库维护
  • 个人所得税工资薪金包括哪些内容
  • 只有收据没有发票怎么入账
  • 盈余公积的会计科目
  • 固定资产损失税前扣除备查资料有哪些
  • 2018年所得税率
  • 税交多了可以退吗
  • ゆうちょ银行转账步骤
  • OS X Yosemite系统怎么样 OS X Yosemite功能介绍
  • win7 media center
  • win10系统打不开此电脑和文件夹
  • 安装linux系统步骤图解
  • linux文件操作常用命令
  • win7系统小喇叭有红叉没声音
  • javascriptcall和apply
  • vue+axios登录
  • github常用操作
  • 手机sd卡满了怎么办
  • javascript用什么运行
  • jqgrid 动态表头
  • jquery调用controller
  • python教程目录
  • jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
  • javascriptjs
  • 重庆市电子发票样式
  • 普票已开发票怎么作废
  • 怎么删除天眼查的判决文书
  • 云南省税务局网上办税服务厅官网
  • 严守纪律守规矩
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设