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这个第三方库管理工具,所以只需要很简单的步骤,就能将高德地图集成到项目中,如果你没使用过这工具, ...
随机推荐
- .Net WebApi 中的 FromBody FromForm FromQuery FromHeader FromRoute
在日常后端Api开发中,我们跟前端的沟通中,通常需要协商好入参的数据类型,和参数是通过什么方式存在于请求中的,是表单(form).请求体(body).地址栏参数(query).还是说通过请求头(hea ...
- Nebula Graph介绍和SpringBoot环境连接和查询
Nebula Graph介绍和SpringBoot环境连接和查询 转载请注明来源 https://www.cnblogs.com/milton/p/16784098.html 说明 当前Nebula ...
- IDEA插件MyBatisCodeHelper-Pro的破解与使用
0.前言 本文中的IDEA版本是2020.3,使用的插件版本是MyBatisCodeHelper-Pro 2.8.9,3.0+版本目前没找到激活的方式 和本文插件类似的还有mybatisX,但我不喜欢 ...
- Redis 02: redis基础知识 + 5种数据结构 + 基础操作命令
Redis基础知识 1).测试redis服务的性能: redis-benchmark 2).查看redis服务是否正常运行: ping 如果正常---pong 3).查看redis服务器的统计信息: ...
- 22.-CSRF攻击
一.CSRF-跨站伪造请求攻击 某些恶意网站上包含链接.表单按钮或者JavaScript,它们会利用登录过的用户在浏览器中的认证信息视图在你的网站上完成某些操作 这就是跨站请求伪造(CSRF,即Cro ...
- .Net Core中获取appsettings.json中的节点数据
获取ConnectionStrings节点数据 //appsettings.json { "ConnectionStrings": { //DEV "DbConn&quo ...
- 基于案例分析 MySQL Group Replication 的故障检测流程
故障检测(Failure Detection)是 Group Replication 的一个核心功能模块,通过它可以及时识别集群中的故障节点,并将故障节点从集群中剔除掉.如果不将故障节点及时剔除的话, ...
- 介绍一个jmeter录制脚本谷歌插件 —— metersphere-chrome-plugin
该插件可将用户在浏览器操作时的 HTTP 请求记录下来并生成 JMX 文件(JMeter 脚本文件). 1. 插件解压 插件下载链接: https://pan.baidu.com/s/14nGb_s9 ...
- Java—猜数字
package cn.day03.demo01; import java.util.Random; import java.util.Scanner; public class RandomGame ...
- [排序算法] 双向冒泡排序 (C++)
前言 本文章是建立在冒泡排序的基础上写的,如还有对 冒泡排序 不了解的童鞋,可以看看这里哦~ 冒泡排序 C++ 双向冒泡排序原理 双向冒泡排序 的基本思想与 冒泡排序还是一样的.冒泡排序 每次将相邻的 ...