uni-app nvue文件使用map

因项目需要，需进行地图选点操作，uni-app的api使用是很方便，但是局限性太大，为了满足老板的需求，只能自己使用map组件来自定义了。

作为一枚程序员，相信很多小伙伴都会有用到map组件的时候。在此，跟大家分享一下，废话不多说，直接开干，上代码。

<template>
<view class="choose-map">
<!-- hahahah -->
<map key="choseMap" :style="mapstyle" id="choseMap" ref="chosemap" class="map" @poitap="poiTap" @tap="clickMap" @regionchange="regionchangeFn" :latitude="latitude" :longitude="longitude" :markers="markers" :show-location="true" enable-traffic>
<cover-view class="saoma" >
<button class="btn" type="primary" size="mini" @click="submitInfo">完成</button>
</cover-view>
<cover-view class="close" @click="closeModal">
<!-- <text style="font-size: 26px;color: #C8C7CC;" class="cuIcon-close">关闭</text> -->
<image class="img" src="../../../static/closemap.png" mode=""></image>
</cover-view>
<cover-view class="searchByKeyword" id="scroller">

<input class="search" type="text" v-model="searchContent" placeholder="请输入需要搜索的关键字" @input="search" />

<list class="list-box" ref="list">
<cell class="list" :class="selectIndex===index ?'active':''" v-for="(item,index) in list" :key="index" @click="selectItem(item,index)">
<view class="icon">
<image class="icon-img" src="../../../static/Location.png"></image>
</view>
<view class="list-content">
<view class="name">
<text :class="selectIndex===index ?'active name-text':'name-text'">{{item.name}}</text>
</view>
<view class="address" >
<text :class="selectIndex===index ?'address-text active':'address-text'">{{item.address}}</text></view>
</view>
<view class="icon">
<image v-if="selectIndex===index" class="icon-img" src="../../../static/select.png"></image>
</view>
</cell>

</list>
</cover-view>
</map>

</view>
</template>

<script>
let mapSearch = weex.requireModule('mapSearch')
export default {
data() {
return {
latitude:26.510227,
longitude:106.696296,
mapstyle:{
width:'160px',
height:'120px',
},

markers:[
{
id:0,
latitude:this.latitude,
longitude:this.longitude,
iconPath:'/static/sharemenu/address.png',
width:30,
height:40,
callout:{
content:this.content
}
}
],
searchContent:"",
list:[],
selectIndex:0,
startAddress:'',
selectedItem:{},
mapContent:{},
isDrag:false,
// createmap:true
}
},
methods: {
async initMap(){
console.log('init')
await this.getLocation();
// this.mapContent=new plus.maps.Map('choseMap');
// this.mapContent= uni.createMapContext('choseMap',this);
this.markers=[{
id:0,
latitude:this.latitude,
longitude:this.longitude,
iconPath:'/static/sharemenu/address.png',
callout:{
content:this.content
}
}];
// this.$refs.chosemap.setCenter(this.longitude,this.latitude)
// this.$refs.chosemap.moveToLocation({
// longitude:this.longitude,
// latitude:this.latitude,
// success:(res)=>{
// console.log(res)
// }
// })
},
getLocation(){
let that=this
// 不做定位，以市级名称为关键字进行搜索
uni.request({
url:'https://restapi.amap.com/v3/place/text?key=自己的key值&keywords=' +that.startAddress+'&citylimit=true'+'&city='+that.startAddress,
method: 'get',
success: (res) => {
console.log(res)
that.list=res.data.pois
that.selectedItem=that.list[that.selectIndex]
console.log(that.selectedItem)
let location=that.selectedItem.location.split(',')
// let longitude =location[0]
// let latitude=location[1]
let addressName=that.selectedItem.name+that.selectedItem.address
that.markers = [{
id: 0,
latitude: location[1],
longitude: location[0],
callout:{
content: addressName,
color: '#333848',
borderRadius: 5,
padding: 10,
display:'ALWAYS',
}
}]

that.$refs.chosemap.translateMarker({
markerId:0,
destination:{
latitude:location[1],
longitude:location[0]
}
})
that.$refs.chosemap.moveToLocation({
longitude:location[0],
latitude:location[1],
fail:(err)=>{
console.log(err)
},success:function(res){
console.log(res)
},complete:(ress)=>{
console.log(ress)
}
})
}
})

// uni.getLocation({
// type:'gcj02',
// geocode:true,
// success:(res)=>{
// console.log(res)
// this.latitude=res.latitude;
// this.longitude=res.longitude;
// // let location=e.detail.split(',')
// let longitude =res.longitude
// let latitude=res.latitude
// this.$refs.chosemap.translateMarker({
// markerId:0,
// destination:{
// latitude:latitude,
// longitude:longitude
// }
// })
// this.$refs.chosemap.moveToLocation({
// longitude:longitude,
// latitude:latitude,
// fail:(err)=>{
// console.log(err)
// },success:function(res){
// console.log(res)
// },complete:(ress)=>{
// console.log(ress)
// }
// })
// let point = {latitude:latitude, longitude:longitude}
// mapSearch.poiSearchNearBy({point,key:''}, function (result) {
// console.log(result)
// that.list=result.poiList
// that.selectIndex=0
// })
// // this.startName=res.address.city+res.address.district+res.address.street+res.address.streetNum

// }
// })
},
closeModal(){
// 通过 id 获取 nvue 子窗体
const subNVue = uni.getSubNVueById('chosePointMap')
// 关闭 nvue 子窗体
subNVue.hide('slide-out-bottom', 300)
// this.createmap=false
this.list=[]
this.selectIndex=0
this.searchContent=''
},
submitInfo(){
let selectedItem=this.list[this.selectIndex]
console.log(selectedItem)
uni.$emit('mapChoose',{
selectedItem:selectedItem
})
// 通过 id 获取 nvue 子窗体
const subNVue = uni.getSubNVueById('chosePointMap')
// 关闭 nvue 子窗体
subNVue.hide('slide-out-bottom', 300)
// this.createmap=false
this.list=[]
this.selectIndex=0
this.searchContent=''
},
search(val){
console.log(val)
console.log(this.startAddress)
let _this=this
uni.request({
url:'https://restapi.amap.com/v3/place/text?key=自己的key值&keywords=' +val.detail.value+'&citylimit=true'+'&city='+_this.startAddress,
method: 'get',
success: (res) => {
console.log(res)
this.list=res.data.pois
_this.selectIndex=0
_this.selectedItem=_this.list[_this.selectIndex]
console.log(_this.selectedItem)
let location=_this.selectedItem.location.split(',')
let longitude =res.longitude
let latitude=res.latitude
_this.$refs.chosemap.translateMarker({
markerId:0,
destination:{
latitude:location[1],
longitude:location[0]
}
})
_this.$refs.chosemap.moveToLocation({
longitude:location[0],
latitude:location[1],
fail:(err)=>{
console.log(err)
},success:function(res){
console.log(res)
},complete:(ress)=>{
console.log(ress)
}
})
}
})
},
// 列表点击
selectItem(item,index){
let _this=this
this.selectedItem=item
this.selectIndex=index
let location=[]
if(item.location.latitude){
location=[item.location.longitude,item.location.latitude]
}else{
location=item.location.split(',')
}
let addressName=this.selectedItem.name+this.selectedItem.address
this.markers = [{
id: 0,
latitude: location[1],
longitude: location[0],
callout:{
content: addressName,
color: '#333848',
borderRadius: 5,
padding: 10,
display:'ALWAYS',
}
}]
console.log(this.selectedItem)
console.log(location)
this.$refs.chosemap.translateMarker({
markerId:0,
destination:{
latitude:location[1],
longitude:location[0]
}
})
this.$refs.chosemap.moveToLocation({
longitude:location[0],
latitude:location[1],
fail:(err)=>{
console.log(err)
},success:function(res){
console.log(res)
},complete:(ress)=>{
console.log(ress)
}
})

},
regionchangeFn (e) {
console.log(e)
if(e.type =='end'){
// this.getCenterLanLat()
}
},
getCenterLanLat() {
let that = this
console.log('hahah')

this.$refs.chosemap.getCenterLocation(function(res){
console.log(res)
// that.$refs.chosemap.translateMarker({
// markerId:0,
// destination:{longitude:res.longitude,latitude:res.latitude},
// duration: 1000,
// })
// let point = {latitude:res.latitude, longitude:res.longitude}
// // 反向地理编码
// mapSearch.reverseGeocode({point}, function (result) {
// console.log(result)
// let i = result.address.indexOf('市')
// let addressName = result.address.substr(i+1)
// that.markers = [{
// id: 0,
// latitude: point.latitude,
// longitude: point.longitude,
// callout:{
// content: addressName,
// color: '#333848',
// borderRadius: 5,
// padding: 10,
// display:'ALWAYS',
// }
// }]
// })
// 搜索周边
// mapSearch.poiSearchNearBy({point,key:''}, function (result) {
// console.log(result)
// that.list=[]
// that.list=result.poiList
// that.selectIndex=0
// let addressName = that.list[that.selectIndex].name+that.list[that.selectIndex].address
// let longitude=that.list[that.selectIndex].location.longitude
// let latitude=that.list[that.selectIndex].location.latitude
// that.markers = [{
// id: 0,
// latitude: latitude,
// longitude: longitude,
// callout:{
// content: addressName,
// color: '#333848',
// borderRadius: 5,
// padding: 10,
// display:'ALWAYS',
// }
// }]
// })
})
},
clickMap(e){
console.log(e)
let that=this
// let location=e.detail.split(',')
let longitude =e.detail.longitude
let latitude=e.detail.latitude

let point = {latitude:latitude, longitude:longitude}
mapSearch.poiSearchNearBy({point,key:''}, function (result) {
console.log(result)
that.list=[]
that.list=result.poiList
that.selectIndex=0
that.selectedItem=that.list[that.selectIndex]
let location=[that.selectedItem.location.longitude,that.selectedItem.location.latitude]

let addressName=that.selectedItem.name+that.selectedItem.address
that.markers = [{
id: 0,
latitude: location[1],
longitude: location[0],
callout:{
content: addressName,
color: '#333848',
borderRadius: 5,
padding: 10,
display:'ALWAYS',
}
}]

that.$refs.chosemap.translateMarker({
markerId:0,
destination:{
latitude:location[1],
longitude:location[0]
}
})
that.$refs.chosemap.moveToLocation({
longitude:location[0],
latitude:location[1],
fail:(err)=>{
console.log(err)
},success:function(res){
console.log(res)
},complete:(ress)=>{
console.log(ress)
}
})

})


},
poiTap(e){
let that=this
if(e.type='poitap'){
let longitude =e.detail.longitude
let latitude=e.detail.latitude
console.log(e)

let point = {latitude:latitude, longitude:longitude}
mapSearch.poiSearchNearBy({point,key:''}, function (result) {
console.log(result)
that.list=[]
that.list=result.poiList
that.selectIndex=0
that.selectedItem=that.list[that.selectIndex]
let location=[that.selectedItem.location.longitude,that.selectedItem.location.latitude]
let addressName=that.selectedItem.name+that.selectedItem.address
that.markers = [{
id: 0,
latitude: location[1],
longitude: location[0],
callout:{
content: addressName,
color: '#333848',
borderRadius: 5,
padding: 10,
display:'ALWAYS',
}
}]
that.$refs.chosemap.translateMarker({
markerId:0,
destination:{
latitude: location[1],
longitude: location[0],
}
})
that.$refs.chosemap.moveToLocation({
latitude: location[1],
longitude: location[0],
fail:(err)=>{
console.log(err)
},success:function(res){
console.log(res)
},complete:(ress)=>{
console.log(ress)
}
})
})
}
console.log(e)
},
},
mounted() {
// this.initMap()
let _this=this
console.log('jiazai')
// 获取要通信的 subNVue 子窗体
const subNVue = uni.getSubNVueById('chosePointMap')
// 打开后进行一些操作...
uni.$on('page-popup-map',(data)=>{
_this.startAddress=data.startAddress
console.log(data)
_this.initMap();
});



// vue 监听 subNVue 子窗体传递的消息
subNVue.onMessage((res) => {
const data = res.data;
console.log(data)
// 执行一些操作
});
},
unmounted() {
uni.$off('page-popup-map')
},
created() {
let _this=this
uni.getSystemInfo({
success(res) {
console.log(res)
// _this.$nextTick(function(){
_this.mapstyle={
width:res.windowWidth,
height:res.windowHeight
}
// })
}
})
}
}
</script>

<style>
.saoma{
position: fixed;
right: 22px;
top: 60px;
width: 60px;
line-height: 0;
color: #FFFFFF;
/* padding: 6px; */
}
.btn{
border: 0;
}
.close{
position: fixed;
left: 30px;
top: 40px;
}
.img{
width: 30px;
height: 30px;
}
.searchByKeyword{
position: fixed;
right: 0px;
bottom: 0px;
/* width: 100%; */
height: 400px;
left: 0;
color: #FFFFFF;
background-color: #FFFFFF;
padding: 20rpx;

}
.search{
font-size: 30rpx;
background-color: #f4f4f4;
padding: 12rpx;
border: 1rpx solid #cccccc;
margin-top: 20rpx;
height: 80rpx;
flex: 0;
font-size: 32rpx;
}
.list-box{
flex: 0;
/* flex-wrap: wrap;
flex-direction: column; */
height: 320px;
/* overflow:scroll; */
}

.list{
flex: 0;
flex-direction: row;
align-items: center;
justify-content: center;
/* height: 100rpx; */
padding: 13px 12rpx;
border-bottom:1rpx solid #e3e8e8;
}
/* .active{
color: #ff0505;
background-color: #f2feff;
} */
.icon{
flex: 1;
text-align: center;
align-items: center;
}
.icon-img{
flex: 0;
width: 20px;
height: 20px;

}
.list-content{
flex: 6;
font-size: 14px;
}
.name{
flex: 0;
text-align: left;
margin-bottom: 12rpx;
}
.name-text{
font-size: 32rpx;
}
.address{
flex: 0;
text-align: left;
font-size: 12px;
color: #CCCCCC;
}
.address-text{
font-size: 28rpx;
color: #C0BEBE;
}
.active{
color: #ff0505;
background-color: #fff7f6;
}
/* .choose-map{
height: 100vh;
width: 100vh;
}
.map{
height: 100vh;
width: 100vh;
} */
</style>

这里使用的是高德地图，关键字搜索也配合了高德地图的webapi来使用，具体的事情得具体解决，灵活应用才是真。至于使用map组件其他配置，各位自己去了解了。