uni小程序地图map的使用以及地图（去导航）调用本地地图功能

点击去导航实现去导航功能

<view class="store_top"><view class="flexno flex2"><view class="store_address">提货门店：{{shopList.detailedAddress}}</view><view class="store_address2" @tap="gotoNavigation()">去导航</view></view><view class="store_map"><map :latitude="latitude" :longitude="longitude" :polyline="polyline" :markers="covers"></map></view></view>

data()里面的参数定义：

具体配置可以查看：https://uniapp.dcloud.io/component/map

//经纬度latitude: 39.909,longitude: 116.39742,//添加标记点covers: [{latitude: 39.9085,longitude: 116.39747,// #ifdef APP-PLUSiconPath: '',// #endif// #ifndef APP-PLUSiconPath: '',// #endif}],//添加连接路线polyline: [{ //指定一系列坐标点，从数组第一项连线至最后一项points: [{latitude: 40.013305,longitude: 118.685713},{latitude: 40.013,longitude: 118.685},],color: "#0000AA", //线的颜色width: 2, //线的宽度dottedLine: true, //是否虚线arrowLine: true, //带箭头的线 开发者工具暂不支持该属性},],

点击去导航实现代码

//去导航gotoNavigation() {if (this.latitude == '' || this.longitude == '') {uni.showToast({title: '请开启手机定位',icon: 'none'});return false}let _that = this;// #ifdef MP-WEIXINwx.getLocation({type: 'gcj02', //返回可以用于wx.openLocation的经纬度success(res) {const latitude = Number(_that.latitude);const longitude = Number(_that.longitude);wx.openLocation({latitude,longitude,scale: 18})}})// #endif},

感谢博主，以下是打赏区域：

uni小程序地图map的使用以及地图（去导航）调用本地地图功能相关推荐

微信小程序实战 -- map：根据百度地图的api来获取地址信息
先附上实现效果: 实现的功能有:(中间"红色图标"所在位置为选择的定位) 1. 拖动地图,进行定位: 2. 根据输入的内容进行地图定位. 一. 申请秘钥ak ,下载百度地图微 ...
微信小程序引入map组件并在地图上标点
效果: 复制粘贴即可 map.wxml <view class="map_container"><map class=' ...
Android扩展类方法,Android 扩展 uni小程序SDK 原生能力
Android 扩展 uni小程序SDK 原生能力概述本文档主要介绍如何扩展 uni小程序SDK 原生能力. 什么是扩展原生能力? 扩展原生能力指的是将您原生开发的功能通过一定规范暴露给 uni小 ...
微信小程序--放入个性化手绘地图具体步骤（腾讯地图）
微信小程序–放入个性化手绘地图具体步骤(腾讯地图) 前言:小程序中想要实现个性化手绘地图需要通过H5嵌入的模式进行实现. 1.首先需要一个腾讯地图的账号(微信登录即可),然后选择个性化地图进入(htt ...
微信小程序内使用echart实现中国地图，点击省跳转省地图，再点击市跳转到市区详情
目的:在微信小程序内实现一张中国地图,上面要写上一些全国数据,点击省 => 省地图,并请求数据,点击市区 => 跳转到市区地图这样一个功能,具体实现效果如下: 思路: 1.首先我们要先画 ...
微信小程序实时定位（腾讯地图）
微信小程序实时获取地理位置-腾讯地图微信小程序-获取当前城市位置: 一. 我用的腾讯定位服务 https://lbs.qq.com/ 打开之后点击控制台 2.我们创建自己的密匙key 3.下载微信小 ...
原生app 打开uni小程序传参问题
最近要在一个原生app的基础上开发新功能, 新功能和原app没有太多交集, 考虑到原生app开发复杂,工期较长, 决定在原生app的基础上整合uni小程序, 使用uniapp开发新功能, 在整合的过 ...
小程序 | 微信小程序中使用位置API打开地图
小程序 | 微信小程序中使用位置API打开地图一.效果展示二.代码实现使用微信内置地图查看位置,调用wx.openLocationAPI,具体内容可以查看微信官方文档. // js let In ...
微信小程序接入微信支付（二）：后台调用统一下单接口
微信统一支付官方文档:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1 因该接口需要商户系统中自己的订单编号,笔者先 ...
微信小程序从零开始开发步骤（三）底部导航栏
上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...

uni小程序地图map的使用以及地图（去导航）调用本地地图功能

uni小程序地图map的使用以及地图（去导航）调用本地地图功能相关推荐

最新文章

热门文章