微信小程序获取当前位置地图定位导航-详细代码

小程序获取当前位置,回到当前位置,地图定位,导航

效果

因为小程序更新了获取地理位置API接口,需要先在app.json中配置一下permission字段 ,不然会报微信小程序getLocation 需要在app.json中声明permission字段

app.json: (不知道具体位置可以看这里,这里有整个app.json的配置)

 "permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}}

wxml:

<!--pages/map/map.wxml--><!-- 这是地图部分 --><view class="map_container"><map class='map' longitude='{{longitude}}' latitude='{{latitude}}' scale='{{scale}}' markers='{{markers}}' controls="{{controls}}" bindcontroltap="bindcontroltap" polyline='{{polyline}}' circles="{{circles}}" bindmarkertap='bindmarkertap' bindcontroltap='bindcontroltap'show-location></map>
</view><!-- 以下是导航部分 --><view class='list-guide'>
<!-- 这里的坐标本应该是从服务器获取数据的,这时丈先写死在页面上了 --><view bindtap="onGuideTap" data-latitude='39.92392' data-longitude='116.411885' data-bankName='最高人民检察院'><image src='/images/banklist/daohang.png' class='list-guide-imgae'></image><text class='list-guide-text'>导航</text></view><view bindtap='onbankTap' data-bankId="{{item.BANK_ID}}"><image src='/images/banklist/xiangqing.png' class='list-guide-imgae'></image><text class='list-guide-text'>详情</text></view></view>

宽度不是满屏,所以加个样式

wxss:

/* pages/map/map.wxss */
.map_container {height: 260px;width: 100%;
}.map {height: 100%;width: 100%;
}.list-guide{display: flex;  flex-direction: row; justify-content:space-around;border-top: 1px solid #ededed;height: 80rpx;
}
.list-guide-imgae{height: 70rpx;width: 70rpx;margin-right: 20px;vertical-align: middle;
}
.list-guide-text{vertical-align: middle;line-height: 90rpx;font-size: 35rpx;
}

下面就是最重要的JS部分了()

JS:

// pages/map/map.js
Page({/*** 页面的初始数据*/data: {addmissage: '选的位置',// markers   Array  标记点stitle:'故宫',latitude: "",longitude: "",scale: 14,markers: [],//controls控件 是左下角圆圈小图标,用户无论放大多少,点这里可以立刻回到当前定位(控件（更新一下,即将废弃，建议使用 cover-view 代替）)controls: [{id: 1,iconPath: '../../images/img/controls.png',position: {left: 15,top: 260 - 50,width: 40,height: 40},clickable: true}],distanceArr: []},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this//获取当前的地理位置、速度wx.getLocation({type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标success: function (res) {//赋值经纬度that.setData({latitude: res.latitude,longitude: res.longitude,})}})},//controls控件的点击事件bindcontroltap(e) {var that = this;if (e.controlId == 1) {that.setData({latitude: this.data.latitude,longitude: this.data.longitude,scale: 14,})}},//导航onGuideTap: function (event) {var lat = Number(event.currentTarget.dataset.latitude);var lon = Number(event.currentTarget.dataset.longitude);var bankName = event.currentTarget.dataset.bankname;console.log(lat);console.log(lon);wx.openLocation({type: 'gcj02',latitude: lat,longitude: lon,name: bankName,scale: 28})},})

项目下载在这里

(只是地图部份,也有删减,非实际项目全部) 已更新

下面是我实际项目中的截图

微信小程序获取当前位置地图定位导航-详细代码相关推荐

微信小程序获取当前位置和城市名
这篇文章主要介绍了微信小程序获取当前位置和城市名的思路,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下目录一.授权并获取经纬度腾讯地图API **简介** Hello world! 一. ...
微信小程序-获取用户位置（经纬度+所在城市）
微信小程序-获取用户位置(经纬度+所在城市) 文章目录微信小程序-获取用户位置(经纬度+所在城市) 一.目标二.实现思路三.实现步骤 3.1 用到的接口函数 3.2 具体步骤 3.2.1 创建界 ...
微信小程序获取当前位置及地图选点功能
标题小程序获取当前位置----逆地址解析----地图选点实现功能:小程序首页定位当前城市类似于某宝: 某团: 获取当前位置: 在小程序首页创建getLocation函数并在onLoad调用首先需 ...
微信小程序获取用户位置信息并显示到地图上
1.配置地理位置用途说明在app.json中的大括号内输入 "permission": {"scope.userLocation": {"desc& ...
uniapp微信小程序获取当前位置信息、经纬度转换、导航地图实现
1.调用接口,官网文档是这样写的 uni.getLocation({type: 'wgs84',success: function (res) {console.log('当前位置的经度:' + re ...
微信小程序获取当前位置的省、市、区等信息
出了趟差,回来的机票路过南京禄口机场转机,结果遇到疫情,被隔离了.刚好趁这个机会把最近搞的一个小项目记录一下,用到微信小程序需要获取当前用户位置的省市区等信息,虽然只有几行代码,但当时查阅了很多大佬的 ...
微信小程序 - 接入腾讯地图 SDK 及详细使用教程，结合小程序 mpa 地图组件展示腾讯地图（基础使用 / 授权当前位置 / 配合小程序map组件的使用 / 腾讯地图逆地址解析 / 坐标系的转化）
介绍网上的教程都太乱了,代码根本没办法拿到自己的项目中去. 本文实现了微信小程序中接入使用腾讯地图插件详细教程,并提供了基础使用 / 授权当前位置 / 配合小程序map组件的使用 / 腾讯地图逆 ...
微信小程序获取用户的 OpenId （附前端代码）
OpenId是什么? openid 是表示用户在你的当前应用中的唯一标识,比如小程序,微信公众号等,这些都算是一个应用,如果你有多个应用,同一个用户的openId可能并不相同 **下图是获取OpenI ...
微信小程序获取当前位置并根据经纬度跳转地图导航
方式一 <view><map id="map" longitude="{{longitude}}" latitude="{{lati ...
微信小程序自带地图_微信小程序获取当前位置并调用微信内置地图打开
图示: index.wxml 定位 index.js //index.js //获取应用实例 const app = getApp() Page({ data: { }, map:function() ...

微信小程序获取当前位置地图定位导航-详细代码

项目下载在这里

(只是地图部份,也有删减,非实际项目全部) 已更新

微信小程序获取当前位置地图定位导航-详细代码相关推荐

最新文章

热门文章

微信小程序获取当前位置 地图定位导航-详细代码

项目下载在这里

(只是地图部份,也有删减,非实际项目全部) 已更新

微信小程序获取当前位置 地图定位导航-详细代码相关推荐

最新文章

热门文章

微信小程序获取当前位置地图定位导航-详细代码

微信小程序获取当前位置地图定位导航-详细代码相关推荐