微信小程序-定位获取管理

hyt_xcx · 发表于 2017-1-7 22:34:33

SearchPOI，map，获取位置，标记位置

map地图的使用，主要功能有，选择位置，返回标记，选择标记，标注收藏信息；

复制代码

// pages/map/map.js
// 获取应用实例
var app = getApp();
// 获取LeanCloud对象
const AV = require('../../libs/av-weapp.js');
var LOCATION_TYPE = 'gcj02';
var DEFAULT_SCALA = 16;
var location = {}; // 定位坐标
var LOCATION_MARKER_ID = 0; // 定位点ID
var locationMarker = { id: LOCATION_MARKER_ID }; // 定位标记
var LOCATION_MARKER_RES = '/res/location.png'; // 定位标记图标
var selected; // 选取坐标
var SELECTED_MARKER_ID = 1; // 选取点ID
var selectedMarker = { id: SELECTED_MARKER_ID, }; // 选取标记
var SELECTED_MARKER_RES = '/res/selected.png'; // 选取标记图标
// 添加收藏对话框
var collectTitle; // 标题
var collectType; // 类型
var collectContent; // 内容
var COLLECTION_MARKER_RES = '/res/collection.png'; // 收藏标记图标
var search; //搜索框文本
var markers = [
// 定位标记
locationMarker,
// 选取点ID
selectedMarker,
]; // 地图标记
Page({
data: {
collectModalHidden: true, // 添加收藏对话框隐藏
collectionModalHidden: true, // 收藏信息对话框隐藏
value: '' // 输入框清空
},
// 显示对话框
showPrompt: function (content) {
wx.showModal({
title: '提示',
content: content,
});
},
// 定位
getLocation: function () {
var that = this;
// 开始定位
wx.getLocation({
type: LOCATION_TYPE, // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
success: function (res) {
// 定位成功
// 定位坐标
location = {
latitude: res.latitude,
longitude: res.longitude,
}
// // 更新定位标记
// locationMarker = {
// id: LOCATION_MARKER_ID,
// title: 'location',
// iconPath: LOCATION_MARKER_RES,
// latitude: res.latitude,
// longitude: res.longitude,
// width: 100,
// height: 100,
// };
// markers[LOCATION_MARKER_ID] = locationMarker;
//若尚未选定点，则把当前定位作为选定点
if (!selected) {
selected = location;
}
// 更新选取点标记
selectedMarker = {
id: SELECTED_MARKER_ID,
title: 'selected',
iconPath: SELECTED_MARKER_RES,
latitude: res.latitude,
longitude: res.longitude,
width: 40,
height: 40
};
markers[SELECTED_MARKER_ID] = selectedMarker;
// 更新数据
that.setData({
position: location, // 定位坐标
scala: DEFAULT_SCALA, // 缩放比例[5-18]
markers: markers, // 标记点
});
},
fail: function () {
// 定位失败
that.showPrompt('定位失败');
},
complete: function () {
// 定位完成
}
})
},
// 加载收藏标记
showCollection: function () {
var that = this;
var query = new AV.Query('Collection');
// 添加条件后，开始查询
query.find()
.then(function (data) {
// 查询成功
for (var i = 0; i < data.length; ++i) {
// 添加标记
markers.push({
id: markers.length,
title: data[i].get('title'),
iconPath: COLLECTION_MARKER_RES,
latitude: data[i].get('latitude'),
longitude: data[i].get('longitude'),
width: 40,
height: 40,
type: data[i].get('type'),
content: data[i].get('content'),
});
}
that.setData({
markers: markers,
});
}, function (error) {
// 查询失败
console.error('Failed to save in LeanCloud:' + error.message);
that.showPrompt('加载收藏失败');
});
},
// 搜索框输入事件
onSearchInput: function (e) {
search = e.detail.value;
},
// 搜索按钮点击事件
onSearchTap: function (e) {
if (!search || search.length == 0) {
this.showPrompt('搜索值不能为空');
}
var that = this;
// 新建查询
var query = new AV.Query('Collection');
query.contains('type', search);
query.find()
.then(function (data) {
// 查询成功
// 清空收藏标记
markers = [
locationMarker,
selectedMarker,
];
for (var i = 0; i < data.length; ++i) {
// 添加标记
markers.push({
id: markers.length,
title: data[i].get('title'),
iconPath: COLLECTION_MARKER_RES,
latitude: data[i].get('latitude'),
longitude: data[i].get('longitude'),
width: 40,
height: 40,
type: data[i].get('type'),
content: data[i].get('content'),
});
}
that.setData({
markers: markers,
});
}, function (error) {
// 查询失败
console.error('Failed to save in LeanCloud:' + error.message);
that.showPrompt('加载收藏失败');
});
},
// 取消搜索按钮点击事件
onCancelSearchTap: function (e) {
var that = this;
// 清空收藏标记
markers = [
locationMarker,
selectedMarker,
];
// 清空搜索框
this.setData({
searchValue: '',
markers: markers,
});
var query = new AV.Query('Collection');
query.find()
.then(function (data) {
// 查询成功
for (var i = 0; i < data.length; ++i) {
// 添加标记
markers.push({
id: markers.length,
title: data[i].get('title'),
iconPath: COLLECTION_MARKER_RES,
latitude: data[i].get('latitude'),
longitude: data[i].get('longitude'),
width: 40,
height: 40,
type: data[i].get('type'),
content: data[i].get('content'),
});
}
that.setData({
markers: markers,
});
}, function (error) {
// 查询失败
console.error('Failed to save in LeanCloud:' + error.message);
that.showPrompt('加载收藏失败');
});
},
// 地图非标记点点击事件
onMapTap: function (e) {
var that = this;
// 显示加载中
wx.showToast({
title: '加载选取工具',
icon: 'loading',
duration: 2000
});
// 跳转选取位置
wx.chooseLocation({
success: function (res) {
// 选取成功
// 更新选取点
selected = {
latitude: res.latitude,
longitude: res.longitude,
};
// 更新选取点标记
selectedMarker = {
id: SELECTED_MARKER_ID,
title: 'selected',
iconPath: SELECTED_MARKER_RES,
latitude: res.latitude,
longitude: res.longitude,
width: 40,
height: 40
};
markers[SELECTED_MARKER_ID] = selectedMarker;
that.setData({
markers: markers,
});
},
cancel: function () {
// 选取取消
},
fail: function () {
// 选取失败
this.showPrompt('选取失败');
},
complete: function () {
// 选取完成
}
})
},
// 标记点点击事件
onMarkerTap: function (e) {
// 定位标记
if (e.markerId == LOCATION_MARKER_ID) {
wx.showToast({
title: '当前定位',
icon: 'success',
});
} else if (e.markerId == SELECTED_MARKER_ID) {
// 选取标记
wx.showToast({
title: '选取位置',
icon: 'success',
});
} else {
// 收藏标记
var marker = markers[e.markerId];
var collection = {
title: marker.title,
type: marker.type,
content: marker.content,
};
// 弹出添加收藏对话框
this.setData({
collectionModalHidden: false,
collection: collection
});
}
},
// 点击收藏信息对话框确认按钮
onCollectionTap: function () {
this.setData({
collectionModalHidden: true,
});
},
// 点击添加收藏按钮事件
onCollectTap: function () {
if (!selected) {
this.showPrompt('还未选取点')
return;
}
// 弹出添加收藏对话框
this.setData({
collectModalHidden: false
});
},
// 点击确认添加收藏事件
onConfirmCollectTap: function () {
var that = this;
if (!selected) {
that.showPrompt('还未选取点');
return;
}
// 输入校验
if (!collectTitle || collectTitle.length == 0) {
that.showPrompt('标题不能为空');
return;
}
if (!collectType || collectType.length == 0) {
that.showPrompt('类型不能为空');
return;
}
if (!collectContent) {
collectContent = '';
}
var collection = AV.Object.extend('Collection');
var col = new collection();
col.set('title', collectTitle);
col.set('type', collectType);
col.set('content', collectContent);
col.set('latitude', selected.latitude);
col.set('longitude', selected.longitude);
col.save().then(function (success) {
// 添加成功
that.showPrompt('添加成功');
markers.push({
id: markers.length,
title: collectTitle,
iconPath: COLLECTION_MARKER_RES,
latitude: selected.latitude,
longitude: selected.longitude,
width: 40,
height: 40
});
that.setData({
markers: markers,
});
// 隐藏添加收藏对话框
that.setData({
collectModalHidden: true,
value: '', // 清空输入框内容
});
}, function (error) {
// 添加失败
console.error('Failed to save in LeanCloud:' + error.message);
that.showPrompt('添加失败');
});
},
// 点击取消添加收藏事件
onCancelCollectTap: function () {
//隐藏添加收藏对话框
this.setData({
collectModalHidden: true,
value: '', // 清空输入框内容
});
},
// 标题输入事件
onCollectTitleInput: function (e) {
collectTitle = e.detail.value;
},
// 类型输入事件
onCollectTypeInput: function (e) {
collectType = e.detail.value;
},
// 内容输入事件
onCollectContentInput: function (e) {
collectContent = e.detail.value;
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
},
onReady: function () {
// 页面渲染完成
this.getLocation(); // 定位
this.showCollection(); // 显示收藏点
},
onShow: function () {
// 页面显示
},
onHide: function () {
// 页面隐藏
},
onUnload: function () {
// 页面关闭
}
})

复制代码

项目地址：

游客，如果您要查看本帖隐藏内容请回复

qaz7060 · 发表于 2017-1-16 09:39:53

啥也不说了，感谢楼主分享哇！

qaz7060 · 发表于 2017-1-16 09:41:18

啥也不说了，感谢楼主分享哇！

bailiang · 发表于 2017-7-19 15:55:27

很棒11111111111111

梦想之_IZYBP · 发表于 2018-8-15 11:12:50

不错！学习了！感谢分享！

客服电话

电子邮件

微信小程序-新版零食商城

小程序移动小商城：基于node，包含前后台

微信小程序端-灵动电商开源系统

小程序-活动报名

小程序-豆豉读书

小程序-智能机器人

微信小程序-大好商城（新增功能天气查询和2

小程序-商城：UI设计完善

微信小程序-商城

小程序-在线聊天功能

微信小程序-我厨-类是小商城

微信小程序-定位获取管理

相关帖子

精彩评论4

社群团购接龙 V16.9.0 小程序前端+后端微

DIY吸粉裂变海报 V9.0.0 微擎功能模块

零象废品回收小程序 V2.3.0+前端开源版微

超级视频 V2.0.15 安装更新一体包微擎功能

预付定金预售 V1.0.3 原版微擎功能模块

商家联盟卡券汇 V2.0.5原版【微擎功能模块

微票务高级版 V4.3.3 原版微擎功能模块

派单o2o V13.1.11 前端+后端【微擎小程序

奇店社群社区团购 V3.6.4.1 小程序前端+后

关于我们

微信小程序

精品源码

全国服务电话

187-8198-7163

反馈建议