经纬度城市街道等位置信息"/>
微信小程序 定位 获取经纬度城市街道等位置信息
看文章 扫一扫 领红包哦
请先看微信小程序关于定位的API:.html#wxgetlocationobject
可以看到:小程序只提供了一个获取地理位置、速度的api,并没有关于地位位置的信息等,因此需要借助一些第三方的api来实现。
实现方法一:百度地图API
1.登录百度开放平台,填写相关信息。
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
- 安全域名设置,需要在微信公众平台添加域名地址
- 示例
// 引入腾讯地图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…({})} })
更多推荐
微信小程序 定位 获取经纬度城市街道等位置信息
发布评论