uniapp 打包app 引入高德地图
一。高德地图注册key值
二。项目中添加配置
三。项目中引用
<view class="home-btom-box" >
<view class="home-zs">
<image class="img-addicon" src="../../static/images/com_icon_adress.png" mode=""></image>
<view class="home-address">住所:{{item.address}}</view>
</view>
<view class="home-dhg" @click='goGaod(item.name,item.address,item.lat_lag)'>
<image class="img-dhicon" src="../../static/images/com_icon_dh.png" mode=""></image>
<view class="home-dhname">导航</view>
</view>
</view>
goGaod(name,addre){
let that = this
if(timer !=null){
clearTimeout(timer)
}
timer=setTimeout(function(){
that.getLng(name,addre)
},1000)
},
//获取 位置的经纬度
getLng(name,addre){
let that = this
uni.request({
url: 'https://restapi.amap.com/v3/geocode/geo',
method: 'GET',
data: {
key: '7757a7501dded9289d*******e6', //高德地图key web的
address: addre // 地址
},
success:function(res){
let lo = res.data.geocodes[0].location.split(',')[0]
let la = res.data.geocodes[0].location.split(',')[1]
that.shop_longtude = lo
that.shop_latitide = la
that.openMap(name,addre,lo,la)
}
})
},
openMap(name,addre,lo,la){
uni.openLocation({
latitude: Number(la),
longitude: Number(lo),
name: name,
address: addre,
success: function() {
console.log('success');
},
fail:function(err){
console.log('打开地图失败',err)
}
})
},
四,直接打开地图选择地址
<view class="uni-list-cell-db">
<view class="addcom-name">住所</view>
<view class="uni-input-wrapper">
<input class="input-write" v-model="form.address" placeholder="请输入" />
</view><image @click="goMaps" class="icon-right" src="../../static/images/com_icon_adress.png" mode=""></image>
</view>
goMaps(){
let that = this
uni.chooseLocation({
success: function (res) {
console.log(res,'res')
console.log('位置名称:' + res.name);
console.log('详细地址:' + res.address);
console.log('纬度:' + res.latitude);
console.log('经度:' + res.longitude);
that.form.address = res.address
}
});
},
uniapp 打包app 引入高德地图的更多相关文章
- vue-cli2.X中引入高德地图,将其设为全局对象
平时一般未用脚手架构建或用webpack构建的项目只要用script标签引入即可,在vue-cli 2.X构建的项目中,需要用如下方式引入高德地图: 首先在高德地图开放平台中注册开发者账号并获取key ...
- vue-element-admin 引入高德地图并做海量点标记
第一步: 首先在index.html入口文件中添加引入高德地图的js,并填写自己在官网申请的key.如果没有申请不填写也是可以的. plugin:项目中如果有需要引入插件则使用没有直接去掉就行. &l ...
- 从flexible.js引入高德地图谈起的移动端适配
曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...
- uniapp小程序使用高德地图api实现路线规划
路线规划 简介 路线规划常用于出行路线的提前预览,我们提供4种类型的路线规划,分别为:驾车.步行.公交和骑行,满足各种的出行场景. 高德开放平台 本例是驾车路线规划功能和位置选择地图api:choos ...
- VUE 2.0 引入高德地图,自行封装组件
1. 高德地图官网 申请帐号, 申请相应(JavaScript API)的 Key 2. 在项目中引入, 这里和其他的引入不同的是 直接在 index.html, 不是在 main.js 引入, 博主 ...
- vue 里面引入高德地图
效果图: 实现: 一:引入 高德,web-sdk (两种方式) 1:在html 中引入(我用的这一种) <script type="text/javascript" src= ...
- vue引入高德地图
一,下载 npm install vue-amap --save 二,main.js文件内引入 import VueAMap from 'vue-amap' Vue.use(VueAMap); // ...
- vue-cli +echarts-amap集成echarts和高德地图TypeError: Cannot read property 'dataToPoint' of null解决方案
由于项目的需求,需要做一种迁徙效果, 最后我们采用了组件化开发,可以说这个坑自己一个人踩,有点累,但也收获不少. vue-cli +echarts-amap集成echarts和高德地图,出现报错,错误 ...
- objective-c高德地图时时定位
这篇随笔是对上一遍servlet接口的实现. 一.项目集成高德地图 应为我这个项目使用了cocopods这个第三方库管理工具,所以只需要很简单的步骤,就能将高德地图集成到项目中,如果你没使用过这工具, ...
随机推荐
- img通过修改css等比例缩小图片
css中加上:object-fit:cover 例子: img{ width: 200px; height: 400px; object-fit: cover; }
- BGCN Rec:模型结构概述
简单论述 BGCN将user-item interaction,user-bundle interaction和bundle-item affiliation 关联到统一的异构图中.以项目节点为桥梁, ...
- OSS对象存储
OSS对象存储 当项目以微服务搭建时,多个服务往往运行在多台服务器上,此时针对存储文件的获取和保存,难以确定具体的位置: 针对这个问题,一般有两个办法: 搭建独立的文件存储服务器,用 FastDFS等 ...
- Redis高可用之主从复制原理演进分析
Redis高可用之主从复制原理演进分析 在很久之前写过一篇 Redis 主从复制原理的简略分析,基本是一个笔记类文章. 一.什么是主从复制 1.1 什么是主从复制 主从复制,从名字可以看出,至少需要 ...
- Kafka与Flume之集成比较
Kafka与Flume之集成比较 一.Kafka与Flume比较 在企业中必须要清楚流式数据采集框架flume和kafka的定位是什么:flume:cloudera公司研发: 适合多个生产者: 适合下 ...
- LcdToos如何实现PX01自动调Flicker及VCOM烧录
准备工作: LcdTools+PX01点亮需调Flicker的屏:F118 Flicker探头,用于自动Flicker校准测量,F118连接PX01上电后,探头屏会提示零点校准,此时需盖住探头窗口再按 ...
- Linux进程间通信(二)
信号 信号的概念 信号是Linux进程间通信的最古老的一种方式.信号是软件中断,是一种异步通信的方式.信号可以导致一个正在运行的进程被另一个正在运行的异步进程中断,转而处理某个突发事件. 一旦产生信号 ...
- Nacos基本学习
一.注册中心 1.启动 1.下载nacos 在Nacos的GitHub页面,提供有下载链接,可以下载编译好的Nacos服务端或者源代码: GitHub主页:https://github.com/ali ...
- 长事务 (Long Transactions)
长事务 长事务用于支持 AutoCAD 参照编辑功能,对于 ObjectARX 应用程序非常有用.这些类和函数为应用程序提供了一种方案,用于签出实体以进行编辑并将其签回其原始位置.此操作会将原始对象替 ...
- VBA---Basic
题记: 之前用VBA做过几个小工具,用来实现办公自动化的.在编写过程中也遇到了一些问题,但最终都通过网友们的分享予以解决,现对其中的一些知识点进行总结. common sense 取消文件刷新: Ap ...