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

  • 企业怎样利用新浪微博进行营销推广(企业如何创新)

    企业怎样利用新浪微博进行营销推广(企业如何创新)

  • 爱奇艺可以一起看视频吗(爱奇艺可以一起看电影吗)

    爱奇艺可以一起看视频吗(爱奇艺可以一起看电影吗)

  • 为什么苹果手机屏幕有一条条线(为什么苹果手机无线局域网打不开)

    为什么苹果手机屏幕有一条条线(为什么苹果手机无线局域网打不开)

  • 电脑版微信视频聊天摄像头为什么用不了(电脑版微信视频聊天怎么全屏)

    电脑版微信视频聊天摄像头为什么用不了(电脑版微信视频聊天怎么全屏)

  • 微信如何打印健康码(微信如何打印健康码和行程码)

    微信如何打印健康码(微信如何打印健康码和行程码)

  • 苹果6sp突然没声音了怎么回事(苹果6sp突然没声音了)

    苹果6sp突然没声音了怎么回事(苹果6sp突然没声音了)

  • 苹果11没有挂电话键(苹果11没有挂电话功能吗)

    苹果11没有挂电话键(苹果11没有挂电话功能吗)

  • 拍立得闪红灯是什么意思(拍立得闪红灯是没电了吗)

    拍立得闪红灯是什么意思(拍立得闪红灯是没电了吗)

  • 怎么删除抖自己的视频作品(怎么删除抖自己的抖音)

    怎么删除抖自己的视频作品(怎么删除抖自己的抖音)

  • 路由器最大多少兆(路由器最大支持多少兆宽带)

    路由器最大多少兆(路由器最大支持多少兆宽带)

  • 10gbps的带宽是多少(10mbps是多少带宽)

    10gbps的带宽是多少(10mbps是多少带宽)

  • hryal00t是什么型号(hryal00是什么型号)

    hryal00t是什么型号(hryal00是什么型号)

  • 嘿siri可以换个叫法吗(嘿siri可以更改吗)

    嘿siri可以换个叫法吗(嘿siri可以更改吗)

  • 手机ppt怎么设置背景(手机PPT怎么设置文字动画)

    手机ppt怎么设置背景(手机PPT怎么设置文字动画)

  • oppor17多少厘米尺寸(oppor17尺寸是多少?)

    oppor17多少厘米尺寸(oppor17尺寸是多少?)

  • vivo哪款能无线充电(vivo什么手机支持无线)

    vivo哪款能无线充电(vivo什么手机支持无线)

  • 苹果11怎么使用自己的铃声(苹果11怎么使用nfc坐地铁)

    苹果11怎么使用自己的铃声(苹果11怎么使用nfc坐地铁)

  • 如何关闭微信平板电脑登录信息(如何关闭微信平台)

    如何关闭微信平板电脑登录信息(如何关闭微信平台)

  • 苹果耳机左右音量怎么不一样(苹果耳机左右音量不一样)

    苹果耳机左右音量怎么不一样(苹果耳机左右音量不一样)

  • 苹果平板怎么投屏(苹果平板怎么投屏小米电视)

    苹果平板怎么投屏(苹果平板怎么投屏小米电视)

  • 华为p30和p30pro差距(华为p30和p30pro对比哪个好)

    华为p30和p30pro差距(华为p30和p30pro对比哪个好)

  • 为什么桌面上的文件删不掉(为什么桌面上的文档图标变成了白色)

    为什么桌面上的文件删不掉(为什么桌面上的文档图标变成了白色)

  • qq怎么解冻七天(qq怎么解冻七天解冻不了)

    qq怎么解冻七天(qq怎么解冻七天解冻不了)

  •  港版iphonexr支持电信吗(港版xr能买吗)

    港版iphonexr支持电信吗(港版xr能买吗)

  • Centos7安装部署免费confluence wiki(知识库)详细操作步骤(centos7安装部署cacti教程)

    Centos7安装部署免费confluence wiki(知识库)详细操作步骤(centos7安装部署cacti教程)

  • 使用D435i相机跑ORB-SLAM2_RGBD_DENSE_MAP-master稠密建图编译(实时彩色点云地图加回环+保存点云地图)(相机4244)

    使用D435i相机跑ORB-SLAM2_RGBD_DENSE_MAP-master稠密建图编译(实时彩色点云地图加回环+保存点云地图)(相机4244)

  • 自有住房出租
  • 清税证明是什么要钱吗
  • 个人所得税抵扣项目有哪些及金额
  • 普惠性幼儿园是非盈利幼儿园吗
  • 利润分配未分配利润借贷方表示什么
  • 上个季度财务报表已申报,可以更正吗
  • 免征增值税还要交印花税么
  • 怎么算应纳企业所得税
  • 非独立核算分公司个税怎么申报
  • 个体工商户如何注册
  • 无形资产发生减值的原因
  • 采购商品未入库的会计分录
  • 预付房租发票未到分录
  • 股权转让印花税税目怎么填
  • 多计提的固定资产折旧
  • 股权转让的违约条款
  • 劳动保护费在企业怎么交
  • 增值税发票开具红字发票后上月税款怎么交?
  • 高薪员工如何降职
  • 发票一定要房东开的才能报销吗?
  • 罚息 增值税
  • 房地产开发企业什么意思
  • 公司充加油卡发票税额为0 怎么入账
  • 公司代缴的个税怎么查询
  • 个人转租房子
  • 大额保险缴费
  • 长时间不操作电动座椅会发生什么
  • 有奖发票奖金支付
  • linux命令top作用
  • linux系统如何更改主机名
  • encore是什么软件
  • 应收账款怎么做会计分录
  • 支付劳务公司的劳务费计入应付账款还是其他应付款
  • php如何继承多个类
  • php单态模式简单解释
  • 长期负债和应付账款
  • react js 教程
  • AttributeError: cannot assign module before Module.__init__() call
  • ps换脸后怎样修理痕迹
  • 缴纳城镇土地税
  • 施工项目的费用包括
  • 回扣没拿到也算违法吗
  • 预收账款的销售分录
  • vue导航方式
  • Yii 连接、修改 MySQL 数据库及phpunit 测试连接
  • 企业向个人借款协议范本
  • 在途资金属于什么科目
  • Java连接sqlserver2008数据库代码
  • 控股公司的收入怎么计算
  • sql server s
  • 如何完成资产负债表
  • 哪些进项税额不得抵扣?
  • 金税四期对小规模企业有何要求
  • 冲减去年管理费怎么做分录
  • 资产负债表调整事项
  • 工程外经证预缴税款计税方法
  • 股东分红要不要纳税?
  • 货物什么情况下需要分批运输
  • 存货科目计算公式是什么
  • 多交的社保退回多久能到账
  • 集团拨款
  • 主营业务收入增长率计算公式
  • 什么是摊余成本法
  • 出纳日记账的日期以什么为准
  • MySQL使用xtrabackup进行备份还原操作
  • win7清除usb插拔记录
  • mac打不了字什么原因
  • linux修改系统日期命令
  • mac安装dw
  • win10系统怎么设置默认打印机
  • 各种linux系统比较
  • win7系统进不了桌面
  • linux userdel
  • Python的pycurl包用法简介
  • 健壮的什么
  • python自动化部署k8s集群
  • JavaScript toFixed() 方法
  • unity networking
  • 销售不动产增值税税率
  • 盐城合作医疗在手机上怎么交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设