做为一名iOS开发，没学过js,也没有学过html，是什么给我勇气开发小程序。。。
是blind~
分享一个最近研究的地图选点的功能吧（业务需求，我有什么办法呢～）新手上路～多多交流～勿喷
后期也会“不定时”更新一些心得、方法、或者闲白～
小程序开发地图选点研究
需要使用地图sdk,研究的是腾讯小程序地图sdk
*key名称：****
*描述：*************
*微信小程序appid:*************
1:注册腾讯地图小程序开发者账号
2:填写信息，申请key:URFBZ-6L4LJ-M56FD-**********
3:配置key
4:下载sdk
5.前往微信公共平台，小程序开发配置，request合法域名配置
6.导入下载的sdk:下载完后，直接将.js文件拖到工程libs目录下
7.在使用界面的js文件，声明sdk的js文件，以下为js文件内容
____________________________________________________________________________________________________________________________
var QQMapWX = require('../libs/qqmap-wx-jssdk.js')
var qqmapsdk;
data: {
borderRadius: 5,
latitude: 0,
longitude: 0,
markers: [],
callout: {
content: '敌人还有五秒到达战场',
bgColor: "#736F6E",
color: "#ffffff",
padding: 10,
display: "ALWAYS",
borderRadius: 5
},
mobileLocation: {//移动选择位置数据
longitude: 0,
latitude: 0,
address: '',
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: 'URFBZ-6L4LJ-M56FD-FQXND-MSFR5-VFF2D'
// key: 'qq-map key'
});
var that = this;
//获取位置
wx.getLocation({
type: 'gcj02',//默认为 wgs84 返回 gps 坐标，gcj02 返回可用于wx.openLocation的坐标
success: function (res) {
console.log(res);
var marker = [{
id: 0,
latitude: res.latitude,
longitude: res.longitude,
callout: {//窗体
content: that.data.callout.content,
bgColor: that.data.callout.bgColor,
color: that.data.callout.color,
padding: that.data.callout.padding,
display: that.data.callout.display,
borderRadius: that.data.callout.borderRadius
},
}];
var mobileLocation = {
latitude: res.latitude,
longitude: res.longitude,
};
that.setData({
latitude: res.latitude,
longitude: res.longitude,
markers: marker,
});
//根据坐标获取当前位置名称，显示在顶部:腾讯地图逆地址解析
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function (addressRes) {
var address = addressRes.result.formatted_addresses.recommend;
mobileLocation.address = address;
console.log(address)
//当前位置信息
that.setData({
mobileLocation: mobileLocation,
});
}
});
}
});
this.mapCtx = wx.createMapContext('qqMap');
},
//移动选点
moveToLocation: function () {
var that = this;
wx.chooseLocation({
success: function (res) {
let mobileLocation = {
longitude: res.longitude,
latitude: res.latitude,
address: res.address,
};
that.setData({
mobileLocation: mobileLocation,
});
},
fail: function (err) {
console.log(err)
}
});
},
8.wxml文件：
<view class="page-body">
<view class="page-section page-section-gap">
<map id="qqMap" style="width: 100%; height: 300px;" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" show-location></map>
</view>
<view class="btn-area">
<button bindtap="moveToLocation" class="page-body-button" type="primary">移动位置</button>
选择的位置：
<view>位置：{{mobileLocation.address}}</view>
<view>经度：{{mobileLocation.longitude}}</view>
<view>纬度：{{mobileLocation.latitude}}</view>
</view>
</view>
________________________________________________________________________________________________________________________________
进入地图功能实现效果：
移动选点实现的效果：
对了～记得在app.json添加这一段代码：
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
以上就是此功能的代码，继续去研究其他的了～后续还会更一些有的没得，督促自己学无止境～哈哈哈
网友评论