uniapp利⽤map标签开发地图定位和搜索关键字查询功能话不多说进⼊正题
简单实⽤地图
<template>
<view class="content">
<view >
<view class="page-section page-section-gap">
<map
id="myMap"
: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:030rpx;
box sizing}
.page-body-button {
margin-bottom:30rpx;
}
</style>
效果!
想要地图初始化的时候位置显⽰为当前定位
<template>
<view class="content">
<view >
<view class="page-section page-section-gap"> <map
id="myMap"
: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')
},
//相关配置参数
data(){
return{
// 初始化的中⼼位置
latitude:23.099994,
longitude:113.324520,
// 标记点
markers:[{
id:1,
latitude:23.099994,
longitude:113.324520,
name:'T.I.T 创意园'
}],
}
},
methods:{
// 位置授权
getAuthorizeInfo(){
getAuthorizeInfo(){
uni.authorize({
scope:'scope.userLocation',
success(){// 允许授权
},
fail(){// 拒绝授权
self.openConfirm();
console.log("你拒绝了授权，⽆法获得周边信息") }
})
},
// 获取地理位置
getLocationInfo(){
type:'wgs84',
success(res){
console.log(res,"当前位置");
// 移动到当前位置
self.latitude = res.latitude;
self.longitude = res.longitude;
}
});
},
// 再次获取授权
// 当⽤户第⼀次拒绝后再次请求授权
openConfirm(){
uni.showModal({
title:'请求授权当前位置',
content:'需要获取您的地理位置，请确认授权',
success:(res)=>{
firm){
uni.openSetting();// 打开地图权限设置
}else if(res.cancel){
uni.showToast({
title:'你拒绝了授权，⽆法获得周边信息',
icon:'none',
duration:1000
})
}
}
});
},
toLocation:function(obj){
// 改变地图中⼼位置
// 移动标记点并添加动画效果
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:030rpx;
}
.
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">

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。