话不多说进入正题
简单实用地图
<template>
<view class="content">
<view >
<view class="page-section page-section-gap">
<map
id="myMap"
style="width: 100%; height: 280px;"
:latitude="latitude"
:longitude="longitude"
:markers="markers"
show-location
></map>
</view>
</view>
</view>
</template>
<script>
export default {
onLoad() {
},
//相关配置参数
data() {
return {
// 初始化的中心位置
latitude: 23.099994,
longitude: 113.324520,
// 标记点
markers: [{
id: 1,
latitude: 23.099994,
longitude: 113.324520,
name: 'T.I.T 创意园'
}],
}
},
methods:{
}
}
</script>
<style>
.page-section-gap{
box-sizing: border-box;
padding: 0 30rpx;
}
.page-body-button {
margin-bottom: 30rpx;
}
</style>
效果!
在这里插入图片描述
想要地图初始化的时候位置显示为当前定位
<template>
<view class="content">
<view >
<view class="page-section page-section-gap">
<map
id="myMap"
style="width: 100%; height: 280px;"
:latitude="latitude"
:longitude="longitude"
:markers="markers"
show-location
></map>
</view>
</view>
</view>
</template>
<script>
var self ,mapCtx
export default {
onLoad() {
self = this
// 获取当前map
mapCtx = wx.createMapContext('myMap')
self.getAuthorizeInfo()
},
//相关配置参数
data() {
return {
// 初始化的中心位置
latitude: 23.099994,
longitude: 113.324520,
// 标记点
markers: [{
id: 1,
latitude: 23.099994,
longitude: 113.324520,
name: 'T.I.T 创意园'
}],
}
},
methods:{
// 位置授权
getAuthorizeInfo(){
uni.authorize({
scope: 'scope.userLocation',
success() { // 允许授权
self.getLocationInfo();
},
fail(){ // 拒绝授权
self.openConfirm();
console.log("你拒绝了授权，无法获得周边信息")
}
})
},
// 获取地理位置
getLocationInfo(){
uni.getLocation({
type: 'wgs84',
success (res) {
console.log(res,"当前位置");
// 移动到当前位置
self.toLocation(res)
self.latitude = res.latitude;
self.longitude = res.longitude;
}
});
},
// 再次获取授权
// 当用户第一次拒绝后再次请求授权
openConfirm(){
uni.showModal({
title: '请求授权当前位置',
content: '需要获取您的地理位置，请确认授权',
success: (res)=> {
if (res.confirm) {
uni.openSetting();// 打开地图权限设置
} else if (res.cancel) {
uni.showToast({
title: '你拒绝了授权，无法获得周边信息',
icon: 'none',
duration: 1000
})
}
}
});
},
toLocation:function(obj){
// 改变地图中心位置
mapCtx.moveToLocation(obj)
// 移动标记点并添加动画效果
mapCtx.translateMarker({
markerId: 1,
autoRotate: true,
duration: 100,
destination: {
latitude:obj.latitude,
longitude:obj.longitude,
},
animationEnd() {
console.log('animation end')
}
})
},
}
}
</script>
<style>
.page-section-gap{
box-sizing: border-box;
padding: 0 30rpx;
}
.page-body-button {
margin-bottom: 30rpx;
}
</style>
效果
在这里插入图片描述
（ps：注意获取定位要设置权限 开启位置接口配置）
在这里插入图片描述
在进一步实现点击地图上的 poi点事位置标记点移动到该点
利用到 map的 bindpoitap事件 点击地图poi点时触发，（ps：此事件需要在真机调试下查看效果）
<template>
<view class="content">
<view >
<view class="page-section page-section-gap">
<map
id="myMap"
style="width: 100%; height: 280px;"
:latitude="latitude"
:longitude="longitude"
:markers="markers"
@poitap = "poitap"
show-location
></map>
</view>
</view>
</view>
</template>
<script>
var self ,mapCtx
export default {
onLoad() {
self = this
// 获取当前map
mapCtx = wx.createMapContext('myMap')
self.getAuthorizeInfo()
},
//相关配置参数
data() {
return {
// 初始化的中心位置
latitude: 23.099994,
longitude: 113.324520,
// 标记点
markers: [{
id: 1,
latitude: 23.099994,
longitude: 113.324520,
name: 'T.I.T 创意园'
}],
}
},
methods:{
// 位置授权
getAuthorizeInfo(){
uni.authorize({
scope: 'scope.userLocation',
success() { // 允许授权
self.getLocationInfo();
},
fail(){ // 拒绝授权
self.openConfirm();
console.log("你拒绝了授权，无法获得周边信息")
}
})
},
// 获取地理位置
getLocationInfo(){
uni.getLocation({
type: 'wgs84',
success (res) {
console.log(res,"当前位置");
// 移动到当前位置
self.toLocation(res)
self.latitude = res.latitude;
self.longitude = res.longitude;
}
});
},
// 再次获取授权
// 当用户第一次拒绝后再次请求授权
openConfirm(){
uni.showModal({
title: '请求授权当前位置',
content: '需要获取您的地理位置，请确认授权',
success: (res)=> {
if (res.confirm) {
uni.openSetting();// 打开地图权限设置
} else if (res.cancel) {
uni.showToast({
title: '你拒绝了授权，无法获得周边信息',
icon: 'none',
duration: 1000
})
}
}
});
},
toLocation:function(obj){
// 改变地图中心位置
mapCtx.moveToLocation(obj)
// 移动标记点并添加动画效果
mapCtx.translateMarker({
markerId: 1,
autoRotate: true,
duration: 100,
destination: {
latitude:obj.latitude,
longitude:obj.longitude,
},
animationEnd() {
console.log('animation end')
}
})
},
//
poitap: function(e){
console.log(e,"poitap")
var obj = e.detail
self.toLocation(obj)
},
}
}
</script>
<style>
.page-section-gap{
box-sizing: border-box;
padding: 0 30rpx;
}
.page-body-button {
margin-bottom: 30rpx;
}
</style>
实现搜索功能 此功能需要用到 腾讯地图 提供的 api（这个功能很多 也比较好用 在这里就不详细列举了 管兴趣的可以看一下 腾讯地图）
1，申请开发者密钥（key）：申请秘钥
2，开通webserviceAPI服务：控制台 ->key管理 -> 设置（使用该功能的key）-> 勾选webserviceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)
在这里插入图片描述
3，下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.2
导入SDK
下载后解压，将里面的 qqmap-wx-jssdk.js 文件拷贝到项目里面。然后在需要的页面导入。
var QQMapWX = require('../../common/qqmap/qqmap-wx-jssdk.min.js');
引用方法
const QQMapWX = new qqmapsdk({
key: '在腾讯位置服务申请的key'
});
我这里只用了 关键词搜索的 方法 search 当然方法还有很对看自己的具体需求(微信小程序JavaScript SDK 方法介绍)
下面上完整代码
<template>
<view class="content">
<view class="top">
<input type="text" placeholder="请输入鱼塘地址" :value="searchKey" @input="search"/>
<scroll-view scroll-y="true" class="option" v-show="IsOption">
<view class='column_item' v-for='(item,index) in data' :key='index' @click="tapOption(item)" >{{item.title}}</view>
</scroll-view>
</view>
<view >
<view class="page-section page-section-gap">
<map
id="myMap"
style="width: 100%; height: 280px;"
:latitude="latitude"
:longitude="longitude"
:markers="markers"
:covers="covers"
@poitap = "poitap"
show-location
></map>
</view>
</view>
</view>
</template>
<script>
// 引入SDK核心类
var QQMapWX = require('../../common/qqmap/qqmap-wx-jssdk.min.js');
var qqmapsdk;
var self;
export default {
data() {
return {
data:[],
IsOption:false,
searchKey:"",
latitude: '',
longitude:'',
markers: [{
id: 1,
latitude: 23.099994,
longitude: 113.324520,
name: 'T.I.T 创意园'
}],
covers: [{
latitude: 23.099994,
longitude: 113.344520,
iconPath: '/image/location.png'
}, {
latitude: 23.099994,
longitude: 113.304520,
iconPath: '/image/location.png'
}],
}
},
onLoad() {
self = this
self.mapCtx = wx.createMapContext('myMap')
self.getAuthorizeInfo()
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: 'WS3BZ-QUFEO-TNEW5-S2RZ6-QVQI6-PJFWY'
});
},
methods: {
bindChange:function(e){
console.log(e)
},
// 搜索框
search: function(e){
console.log(e)
self.searchKey = e.detail.value
var location = self.latitude+","+ self.longitude
self.mapSearch(self.searchKey,location).then(res => {
self.data = res.data
if(self.searchKey && self.data.length){
self.IsOption = true
}else{
self.IsOption = false
}
},error => {
// self.$api.msg('请求失败')
// console.log(error,"aaaaaaaaaaa");
})
},
tapOption:function(item){
self.searchKey = item.title
self.IsOption = false
self.data = []
var obj = {}
obj.latitude = item.location.lat;
obj.longitude = item.location.lng;
// console.log(item,"danji",obj)
self.toLocation(obj)
},
toLocation:function(obj){
self.mapCtx.moveToLocation(obj)
self.mapCtx.translateMarker({
markerId: 1,
autoRotate: true,
duration: 100,
destination: {
latitude:obj.latitude,
longitude:obj.longitude,
},
animationEnd() {
console.log('animation end')
}
})
},
//
mapSearch:function(keyword,location){
console.log(keyword,location,"keyword,location")
let promise = new Promise(function(resolve, reject) {
// 调用接口
qqmapsdk.search({
keyword: keyword,//搜索关键词
location:location , //设置周边搜索中心点
success: function (res) {
resolve(res)
},
fail: function (res) {
reject(res)
}
});
})
return promise
},
// 位置授权
getAuthorizeInfo(){
uni.authorize({
scope: 'scope.userLocation',
success() { // 允许授权
self.getLocationInfo();
},
fail(){ // 拒绝授权
self.openConfirm();
console.log("你拒绝了授权，无法获得周边信息")
}
})
},
// 获取地理位置
getLocationInfo(){
uni.getLocation({
type: 'wgs84',
success (res) {
console.log(res,"当前位置");
self.toLocation(res)
self.latitude = res.latitude;
self.longitude = res.longitude;
// uni.openLocation({
// latitude: latitude,
// longitude: longitude,
// success: function () {
// console.log('success');
// }
// })
}
});
},
// 再次获取授权
// 当用户第一次拒绝后再次请求授权
openConfirm(){
uni.showModal({
title: '请求授权当前位置',
content: '需要获取您的地理位置，请确认授权',
success: (res)=> {
if (res.confirm) {
uni.openSetting();// 打开地图权限设置
} else if (res.cancel) {
uni.showToast({
title: '你拒绝了授权，无法获得周边信息',
icon: 'none',
duration: 1000
})
}
}
});
},
poitap: function(e){
console.log(e,"poitap")
var obj = e.detail
self.searchKey = obj.name
// this.$api.msg(e)
self.toLocation(obj)
},
getCenterLocation: function () {
this.mapCtx.getCenterLocation({
success: function(res){
console.log(res.longitude)
console.log(res.latitude)
}
})
},
// 下一步
Next:function(){
uni.navigateTo({
url: './addFishpond2'
})
},
// 取消删除
Cancel:function(){
},
}
}
</script>
<style>
.content {
background-color: #F1F1F1;
overflow: hidden;
min-height: 100vh;
color: #646464;
font-size:40rpx ;
}
.top>input{
height: 88rpx;
width: 524rpx;
margin: 40rpx auto 0;
padding:0 40rpx;
border: solid 2rpx #BEBEBE;
}
.option{
max-height: 300rpx;
width: 100%;
line-height: 60rpx;
position: fixed;
top: 128rpx;
z-index: 99999;
}
.column_item{
padding:0 40rpx;
height: 60rpx;
width: 524rpx;
overflow: hidden;
margin:0rpx auto;
background-color: #fff;
text-overflow: ellipsis;
white-space: nowrap;
}
.column_item:active{
background-color: #8F8F94;
}
.page-section-gap{
box-sizing: border-box;
/* padding: 0 30rpx; */
margin: 30rpx auto;
width: 600rpx;
}
</style>
效果
在这里插入图片描述
实现了简答的搜索 感觉搜索方面不太智能 有好的建议的地方大家可以交流一下
网友评论