一。高德地图注册key值

二。项目中添加配置

三。项目中引用

  1. <view class="home-btom-box" >
  2. <view class="home-zs">
  3. <image class="img-addicon" src="../../static/images/com_icon_adress.png" mode=""></image>
  4. <view class="home-address">住所:{{item.address}}</view>
  5. </view>
  6. <view class="home-dhg" @click='goGaod(item.name,item.address,item.lat_lag)'>
  7. <image class="img-dhicon" src="../../static/images/com_icon_dh.png" mode=""></image>
  8. <view class="home-dhname">导航</view>
  9. </view>
  10. </view>
  1. goGaod(name,addre){
  2. let that = this
  3. if(timer !=null){
  4. clearTimeout(timer)
  5. }
  6. timer=setTimeout(function(){
  7. that.getLng(name,addre)
  8.        },1000)
  9. },
  10. //获取 位置的经纬度
  11. getLng(name,addre){
  12. let that = this
  13. uni.request({
  14. url: 'https://restapi.amap.com/v3/geocode/geo',
  15. method: 'GET',
  16. data: {
  17. key: '7757a7501dded9289d*******e6', //高德地图key web的
  18. address: addre // 地址
  19. },
  20. success:function(res){
  21. let lo = res.data.geocodes[0].location.split(',')[0]
  22. let la = res.data.geocodes[0].location.split(',')[1]
  23. that.shop_longtude = lo
  24. that.shop_latitide = la
  25. that.openMap(name,addre,lo,la)
  26. }
  27. })
  28. },

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)
    }
  })
},

  1.  

四,直接打开地图选择地址

  1. <view class="uni-list-cell-db">
  2. <view class="addcom-name">住所</view>
  3. <view class="uni-input-wrapper">
  4. <input class="input-write" v-model="form.address" placeholder="请输入" />
  5. </view><image @click="goMaps" class="icon-right" src="../../static/images/com_icon_adress.png" mode=""></image>
  6. </view>
  1. goMaps(){
  2. let that = this
  3. uni.chooseLocation({
  4. success: function (res) {
  5. console.log(res,'res')
  6. console.log('位置名称:' + res.name);
  7. console.log('详细地址:' + res.address);
  8. console.log('纬度:' + res.latitude);
  9. console.log('经度:' + res.longitude);
  10. that.form.address = res.address
  11. }
  12. });
  13. },

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. docker还原挂载在宿主机的mysql数据

    ps:有个项目的数据库之前是docker的mysql镜像,数据都去mysql的镜像里面拿数据,但是目前镜像里面的数据库是空的,所以现在来说明一下如何恢复数据 1.创建数据卷 docker volume ...

  2. Notebook交互式完成目标检测任务

    摘要:本文将介绍一种在Notebook中进行算法开发的新方式,新手也能够快速训练自己的模型. 目标检测是计算机视觉中非常常用且基础的任务,但是由于目标检测任务的复杂性,往往令新手望而却步.本文将介绍一 ...

  3. C/C++ 关于默认构造函数

    前言: 在C++中,对于一个类,C++的编译器都会为这个类提供四个默认函数,分别是: A() //默认构造函数 ~A() //默认析构函数 A(const A&) //默认拷贝构造函数 A&a ...

  4. C++ 中std::的使用

    std是一个类(输入输出标准),它包括了cin成员和cout成员,using name space std ;以后才能使用它的成员.#include<iostream.h>中不存在类std ...

  5. 市面上erp软件那么多,为什么很多卖家选择定制erp?

    为什么选择定制ERP?适合自己的才是最好的啊!就连头部ERP企业提供给用户的ERP系统,应该也没有不进行个性化定制的吧,匹配很重要!规模不同.行业不同.发展阶段不同.生产模式不同.管理理念不同,适用的 ...

  6. BZOJ2654 tree (wqs二分)

    题目描述 给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有need条白色边的生成树. 题目保证有解.   一个最小生成树问题,但是我们要选need条白边,我们用g(i)表示选取i条 ...

  7. 学习ASP.NET Core Blazor编程系列六——初始化数据

    学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...

  8. Hbase之API基本操作

    API之框架 private static Admin admin = null; private static Connection connection = null; private stati ...

  9. 齐博x1标签实例:标签设置取组图不存在就取内容中的图片

    对于CMS或者是其它,使用下面的代码 <div class="morepic"> {volist name=":getArray($pics=$rs.picu ...

  10. Workflow,要不要了解一下

    摘要:Workflow本质是开发者基于实际业务场景开发用于部署模型或应用的流水线工具. Workflow(也称工作流,下文中均可使用工作流进行描述)本质是开发者基于实际业务场景开发用于部署模型或应用的 ...