一。高德地图注册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 引入高德地图的更多相关文章

  1. vue-cli2.X中引入高德地图,将其设为全局对象

    平时一般未用脚手架构建或用webpack构建的项目只要用script标签引入即可,在vue-cli 2.X构建的项目中,需要用如下方式引入高德地图: 首先在高德地图开放平台中注册开发者账号并获取key ...

  2. vue-element-admin 引入高德地图并做海量点标记

    第一步: 首先在index.html入口文件中添加引入高德地图的js,并填写自己在官网申请的key.如果没有申请不填写也是可以的. plugin:项目中如果有需要引入插件则使用没有直接去掉就行. &l ...

  3. 从flexible.js引入高德地图谈起的移动端适配

    曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...

  4. uniapp小程序使用高德地图api实现路线规划

    路线规划 简介 路线规划常用于出行路线的提前预览,我们提供4种类型的路线规划,分别为:驾车.步行.公交和骑行,满足各种的出行场景. 高德开放平台 本例是驾车路线规划功能和位置选择地图api:choos ...

  5. VUE 2.0 引入高德地图,自行封装组件

    1. 高德地图官网 申请帐号, 申请相应(JavaScript API)的 Key 2. 在项目中引入, 这里和其他的引入不同的是 直接在 index.html, 不是在 main.js 引入, 博主 ...

  6. vue 里面引入高德地图

    效果图: 实现: 一:引入 高德,web-sdk (两种方式) 1:在html 中引入(我用的这一种) <script type="text/javascript" src= ...

  7. vue引入高德地图

    一,下载 npm install vue-amap --save 二,main.js文件内引入 import VueAMap from 'vue-amap' Vue.use(VueAMap); // ...

  8. vue-cli +echarts-amap集成echarts和高德地图TypeError: Cannot read property 'dataToPoint' of null解决方案

    由于项目的需求,需要做一种迁徙效果, 最后我们采用了组件化开发,可以说这个坑自己一个人踩,有点累,但也收获不少. vue-cli +echarts-amap集成echarts和高德地图,出现报错,错误 ...

  9. objective-c高德地图时时定位

    这篇随笔是对上一遍servlet接口的实现. 一.项目集成高德地图 应为我这个项目使用了cocopods这个第三方库管理工具,所以只需要很简单的步骤,就能将高德地图集成到项目中,如果你没使用过这工具, ...

随机推荐

  1. 关于Azure-AzCopy在Linux环境下的安装

    关于Azure云中有一个AzCopy工具,它 是一个命令行实用工具,支持各种操作系统 AzCopy可以用于向存储帐户复制上传文件,也可以从存储账号下载文件到本地 这里笔者主要记录一下在Linux-x8 ...

  2. 复杂场景数据处理的 OLTP 与 OLAP 融合实践

    本文首发于 NebulaGraph 公众号 Dag Controller 介绍 Dag Controller 是 NebulaGraph 企业版的系统,经过反复测试无误后进行了发布,它主要解决的是 O ...

  3. 【深入浅出 Yarn 架构与实现】1-1 设计理念与基本架构

    一.Yarn 产生的背景 Hadoop2 之前是由 HDFS 和 MR 组成的,HDFS 负责存储,MR 负责计算. 一)MRv1 的问题 耦合度高:MR 中的 jobTracker 同时负责资源管理 ...

  4. WebKit策略:<foreignObject>可用于绘制svg中的html标签,但与<use>搭配不生效

    在<svg>里面可以利用<foreignObject>绘制html标签,原本是我在iconfont采用Font class方式引入svg的无奈之举. 起初的设计是所有icon先 ...

  5. Go语言核心36讲46

    我们今天要讲的是os代码包中的API.这个代码包可以让我们拥有操控计算机操作系统的能力. 前导内容:os包中的API 这个代码包提供的都是平台不相关的API.那么说,什么叫平台不相关的API呢? 它的 ...

  6. oracle问题记录

    ORA-01034: ORACLE not available [oracle@ilanni ~]$ sqlplus /nolog SQL*Plus: Release 10.2.0.1.0 – Pro ...

  7. C++初阶(封装+多态--整理的自认为很详细)

    继承 概念:继承机制是面向对象程序设计使代码可以复用的最重要的手段,它允许程序员在保持原有类特性的基础上进行扩展,增加功能,这样产生新的类,称派生类.继承呈现了面向对象程序设计的层次结构,体现了由简单 ...

  8. 华为云平台部署教程之CNA\VRM的安装

    本教程仅含华为云平台搭建部署中CNA和VRM的安装,请按需求选择查看本文. 一.前期准备 1.硬件 服务器*4 交换机*3 网线 个人PC机 2.软件 PC机系统(win7/win10) KVM软件 ...

  9. Android网络请求(1)

    Android网络请求(1) ​ 安卓开发网络请求可谓是安卓开发的灵魂,如果你不会网络请求,那么你开发的应用软件就是一具没有灵魂的枯骨. ​ 在安卓开发中进行网络请求和java中的网络请求有异曲同工之 ...

  10. nestjs搭建HTTP与WebSocket服务

    最近在做一款轻量级IM产品,后端技术栈框架使用了nodejs + nestjs作为服务端.同时,还需要满足一个服务同时支持HTTP服务调用以及WebSocket服务调用,此文主要记录本次搭建过程,以及 ...