|
|
点评：map地图的使用，主要功能有，选择位置，返回标记，选择标记，标注收藏信息；
[mw_shl_code=html,true]// 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.get('title'),
iconPath: COLLECTION_MARKER_RES,
latitude: data.get('latitude'),
longitude: data.get('longitude'),
width: 40,
height: 40,
type: data.get('type'),
content: data.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.get('title'),
iconPath: COLLECTION_MARKER_RES,
latitude: data.get('latitude'),
longitude: data.get('longitude'),
width: 40,
height: 40,
type: data.get('type'),
content: data.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.get('title'),
iconPath: COLLECTION_MARKER_RES,
latitude: data.get('latitude'),
longitude: data.get('longitude'),
width: 40,
height: 40,
type: data.get('type'),
content: data.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 () {
// 页面关闭
}
})[/mw_shl_code]
|
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？立即注册
×
|
|手机版|小黑屋|微信小程序开发|教程|文档|资源汇总_即速论坛
( 粤ICP备14097199号-1 ) 
窥视卡
雷达卡
发表于 2017-1-11 12:42:15
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜