微信小程序 定位 获取经纬度城市街道等位置信息
看文章 扫一扫 领红包哦
请先看微信小程序关于定位的API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html#wxgetlocationobject
可以看到:小程序只提供了一个获取地理位置、速度的api,并没有关于地位位置的信息等,因此需要借助一些第三方的api来实现。
实现方法一:百度地图API
1.登录百度开放平台http://lbsyun.baidu.com并申请AK,填写相关信息。
2.在项目根目录下新建一个路径,下载百度地图微信小程序JavaScript API,解压后得到 bmap-wx.js 文件(解压后有bmap-wx.js和bmap-wx.min.js两种文件,考虑到轻量化,建议用压缩版的bmap-wx.min.js),将其拷贝到新建的路径下,完成。
3.设置请求合法域名
登录微信公众平台-> "设置" -> "开发设置" -> "request 合法域名" ->添加 api.map.baidu.com -> 点击"保存并提交",如图所示:
打开开发者工具 -> "项目" -> 点击"刷新",合法域名设置同步完成。
4. 使用:
var app = getApp()
// 引用百度地图微信小程序JSAPI模块 换成你的文件路径
var bmap = require('../../utils/bmap-wx.min.js');
var wxMarkerData = []; //定位成功回调对象
Page({/*** 页面的初始数据*/data: {ak: "。。。", //填写申请到的ak markers: [], //地图标记 这里暂没用到longitude: '', //经度 latitude: '', //纬度 address: '', //地址 business: {}, //商圈 desc:'' , //描述},onLoad: function (options) {console.log("定位");var that = this;//新建百度地图对象var BMap = new bmap.BMapWX({ak: that.data.ak});var success = function(data){console.log(data);wxMarkerData = data.wxMarkerData;that.setData({markers:wxMarkerData,latitude: wxMarkerData[0].latitude,longitude:wxMarkerData[0].longitude,address:wxMarkerData[0].address,business: wxMarkerData[0].business,desc: wxMarkerData[0].desc,city: wxMarkerData[0].title,});}var fail = function(data){console.log(data);}BMap.regeocoding({fail:fail,success:success});},
})
<view class="jing">经度:{{latitude}}</view><view class="wei">纬度:{{longitude}}</view><view class="add">地址:{{address}}</view><view class="add">商圈:{{business}}</view><view class="add">描述:{{desc}}</view>
实现方法二:腾讯地图API
- 申请开发者密钥(key):申请密匙
- 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.0
- 安全域名设置,需要在微信公众平台添加域名地址https://apis.map.qq.com
- 示例
// 引入腾讯地图SDK核心类 var QQMapWX = require('../../utils/qqmap-wx-jssdk.js'); var util = require("../../utils/util.js"); var qqmapsdk; Page({data: {resData: []},onLoad: function (options) {// 实例化腾讯地图API核心类qqmapsdk = new QQMapWX({key: 'HHHHH-BHJDJ-CZQPP-UN4IHS-QYOF2-MYFU3'//此处使用你自己申请的key});},onShow: function () {var that = this;// 腾讯地图调用接口qqmapsdk…({})} })
微信小程序 定位 获取经纬度城市街道等位置信息相关推荐
- uniapp、hbuilderx做微信小程序,获取当前城市定位(省份国家街道等)
获取用户当前位置分为3步 1.获取位置用户请求权限 2.获取经纬度 3.经纬度转换为城市 一.获取位置用户请求权限 获取权限的目的主要是因为避免转换不了城市的报错(可能出现不提示"需要先请求 ...
- 微信小程序地图获取经纬度并获取经纬度的地址信息
在需要添加地图的html页面 <map id="map" longitude="{{longitude}}" latitude="{{latit ...
- 微信小程序如何获取用户昵称性别地区等信息
在inde.wxml文件中添加一个按钮,当点击按钮时获取用户信息 <button open-type="getUserInfo" bindgetuserinfo=" ...
- uniapp:微信小程序,获取定位省市区街道信息
关于微信小程序定位省市区信息,超详细教程,傻瓜式操作,根据我的文章一步一步操作即可实现定位. 准备工作,申请腾讯位置服务微信小程序JavaScript SDK 1.第一步先申请密匙,进入key设置 2 ...
- 微信小程序如何获取手机地址定位
微信小程序如何获取手机地址定位 微信小程序中,经常需要获取地址定位. 微信小程序中如何获取地址定位. wx.getLocation({success: function (res) {console. ...
- 微信小程序(小程序定位获取地址信息篇)
微信小程序(小程序定位获取地址信息篇) 程序思路:1.小程序获取用户定位信息(经纬度)2.引入腾讯地图SDK ,将经纬度传入逆向定位方法 3.[SDK下载地址](https://mapapi.qq.c ...
- 微信小程序之获取用户地址
在微信小程序中获取定位信息 今天一整天基本上都在处理在微信小程序中获取准确地址,给出定位并给出所在城市的问题.经过走了半天弯路,现在总结一下所需要的步骤. 一. 先到腾讯位置服务中心获取KEY 通过小 ...
- 微信小程序定位权限封装
微信小程序定位权限封装 getUserOrSystemPermissions.js //如需动态获取权限,修改res.authSetting['scope.userLocation']与scope: ...
- 微信小程序地图获取地点信息(打卡签到功能为例)-2020-7-26
目录 微信小程序地图获取地点信息(打卡签到功能为例) 效果图 前提步骤 首先需要了解的 代码部分 配置性代码 功能性代码 demo 下载 微信小程序地图获取地点信息(打卡签到功能为例) 解决方案:利用 ...
最新文章
- 用rufus f2 制作Ubuntu16.04 U盘启动盘
- Linux文件系统基础(1)
- python plot map_python的colormap总结(matplotlib+ncl+气象家园调色盘)
- MAVEN Error: Using platform encoding (GBK actually) to copy filtered resources.....
- 人口、人口密度分析项目-条形图
- docker entrypoint入口文件详解
- python闭合函数_Python中函数的闭包
- 如何评价百度新目标:Everyone can AI ?| 在现场
- # 20145205 《Java程序设计》第1周学习总结
- openlayers5学习笔记-map事件(moveend)
- 免费培训后包就业,还月薪上万,深扒BI数据工程师培训套路
- python + expect + list = goto myip
- highChart导出PDF
- Java用for循环嵌套*输出一个长方形
- cmd返回上一级和根目录
- Linux查找之find/df/du命令
- java和python哪个更好找工作?
- 故障分析 | 从 data_free 异常说起
- 新浪微博 (sso package or sign error)
- 重金砸下近100亿,美团买菜正在偷偷做这件事
热门文章
- python之路day3_python之路:day3
- STM32F4应用-串口通信
- 产生分类中的双月问题的数据集
- 安卓java百度地图api文档_Android调用百度地图API 实时定位代码
- 技术、商业和创新的彼岸:“被折叠”的三星
- 一键批量PDF转换成图片文件
- 2018(农历年)封山之作,和我一起嚼烂Git(两万字长文)
- 寻找鲁菜——美食江山寻味记之三·胶东人家
- win10+VS2012+opencv2.4.11的安装和配置
- OpenCV C++入门,读取和显示一张图片