看文章 扫一扫 领红包哦
请先看微信小程序关于定位的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…({ }) } })
