前言
uniapp nvue模式下运用map组件实现卡口地图标注以及通过mapSearch检索周边地址，实现定位当前位置并放大地图移动到地图中心位置。
效果图预览
一、使用map组件
<map key='map1' id="map1" :style="{width: '750rpx', height: main_h + 'px'}" :latitude="latitude" :longitude="longitude" :scale="scale" :polyline="polylines" :markers="markers"></map>
二、定位移动当前位置api
map1.moveToLocation({
latitude: res.latitude,
longitude: res.longitude,
success: (res1) => {
},
fail: (err1) => {
console.log(err)
}
})
三、完整示例
<template>
<view class="bg-page" :style="{height: main_h + 'px'}">
<map key='map1' id="map1" :style="{width: '750rpx', height: main_h + 'px'}" :latitude="latitude" :longitude="longitude"
:scale="scale" :polyline="polylines" :markers="markers">
</map>
<view class="ym-fubox">
<view class="ym-fu-item" @click="getMarks(1)">
<image :src="kk_active?'../../static/images/kakou_ac.png':'../../static/images/kakou.png'" style="width: 40rpx;height: 40rpx;"
mode=""></image>
<text style="font-size: 35rpx;color:#3F94FB;margin-left: 20rpx;" :style="{color:kk_active?'#FF1616':'#3F94FB'}">卡 口</text>
</view>
<view class="ym-fu-item mg-t3" @click="getMarks(2)">
<image :src="jk_active?'../../static/images/jiankong_ac.png':'../../static/images/jiankong.png'" style="width: 40rpx;height: 40rpx;"
mode=""></image>
<text style="font-size: 35rpx;color:#3F94FB;margin-left: 20rpx;" :style="{color:jk_active?'#FF1616':'#3F94FB'}">电子眼</text>
</view>
<view class="ym-fu-item mg-t3" @click="showSearchView()">
<text style="font-size: 35rpx;color:#3F94FB;margin-left: 20rpx;" :style="{color:showView?'#FF1616':'#3F94FB'}">路况资讯</text>
</view>
</view>
<view class="ym-site" @click="currentSite()">
<image style="width: 40rpx;height: 40rpx;" src="../../static/images/dingwei.png" mode=""></image>
</view>
<view class="ym-address" v-if="showSearch">
<scroll-view scroll-y="true" style="height: 600rpx;">
<view class="ym-address-list" v-for="(item,index) in addressList" @click="selAddress(item)">
<view style="width: 400rpx;">
<text style="font-size: 35rpx;">{{item.name}}</text>
<text style="font-size: 30rpx;color: #666666;margin-top: 10rpx;">{{item.address}}</text>
</view>
<view class="">
<text style="font-size: 28rpx;color: #999999;">{{item.distance}}km</text>
</view>
</view>
<view class="ym-address-list" v-if="addressList.length===0">
<text style="font-size: 32rpx;color: #999999;">暂无数据</text>
</view>
</scroll-view>
<view class="ym-address-close" @click="closeSearch()">
<text style="color: #666666;font-size: 32rpx;">关闭</text>
</view>
</view>
<view class="ym-ac-cont" @touchmove.stop.prevent="moveStop">
<view @click="openView()">
<image style="width: 40rpx;height: 40rpx;margin: 20rpx;" :src="showView?'../../static/images/map-bottom.png':'../../static/images/map-top.png'"></image>
</view>
<view class="ym-search">
<image src="../../static/images/search.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
<input class="ym-search-input" type="text" v-model="searchValue" placeholder="查询周边路段" @confirm="confirm()" />
</view>
<scroll-view v-if="showView" scroll-y="true" style="padding: 20rpx;height: 800rpx;" @scrolltolower="onMoresList">
<view class="ym-ac-list" v-for="(item,index) in artList" :key="index" @click="toDetail(item)">
<view class="ym-ac-item">
<text class="ym-ac-title" style="width: 400rpx">{{item.informationTitle}}</text>
<view class="ym-ac-bot">
<image class="icon mg-r1" src="../../static/images/avatar.png" mode=""></image>
<text class="size-s c-gray" >{{item.writerUser}}</text>
<image class="icon mg-r1" style="margin-left: 40rpx;" src="../../static/images/atime.png" mode=""></image>
<text class="size-s c-gray ">{{item.createTime}}</text>
</view>
</view>
<image style="width: 240rpx;height: 180rpx;" :src="item.coverUrl" mode=""></image>
</view>
<li-loadmore :state="state" />
</scroll-view>
</view>
</view>
</template>
<script>
var app = getApp();
var bayonetApi = require('../../utils/bayonet.js');
import permision from "@/js_sdk/wa-permission/permission.js"
const Binding = uni.requireNativePlugin('bindingx');
const domModule = weex.requireModule('dom')
let mapSearch = weex.requireModule('mapSearch')
var alert = function(msg) {
uni.showToast({
icon: 'none',
title: msg
})
}
export default {
props: {
main_h: {
type: Number,
default: 0
},
page_index: {
type: Number,
default: 0
},
},
data() {
return {
map: null,
mapHeight: 1334,
showView: false,
latitude: 28.760189,
longitude: 104.630825,
polylines: [],
currentPage: 1,
markers: [{
id: 0,
latitude: 0,
longitude: 0,
}, {
id: -1,
latitude: 0,
longitude: 0,
}],
artList: [],
kk_active: false,
jk_active: false,
state: 1,
scale: 13,
searchValue: "",
addressList: [],
showSearch: false,
}
},
created() {
var that = this;
app._post(bayonetApi.getArtList, {
currentPage: 1,
itemsPerPage: 10,
},
function(e) {
// console.log(e);
if (e.rows.length < 10) {
that.state = 0;
}
if (e.rows.length == 10) {
that.state = 1;
}
that.artList = e.rows;
},
function(e) {
console.log(e)
}
)
},
watch: {},
methods: {
openView() {
if (this.showView) {
this.showView = false;
} else {
this.showView = true;
}
},
onMoresList() {
this.currentPage++;
var that = this;
that.state = 2;
app._post(bayonetApi.getArtList, {
currentPage: that.currentPage,
itemsPerPage: 10,
},
function(e) {
console.log(e);
if (e.rows.length < 10) {
that.state = 0;
}
if (e.rows.length == 10) {
that.state = 1;
}
that.artList = that.artList.concat(e.rows);
},
function(e) {
this.currentPage--;
console.log(e)
}
)
},
moveStop() {
},
async currentSite() {
this.scale = 13;
let platform = uni.getSystemInfoSync().platform
//判断定位权限
if (platform == 'ios') {
var result = permision.judgeIosPermission("location")
} else {
var result = await permision.requestAndroidPermission('android.permission.ACCESS_FINE_LOCATION')
}
if (result === 1 || result === true) {
let map1 = uni.createMapContext('map1', this);
var that = this;
uni.getLocation({
type: 'gcj02',
success: (res) => {
console.log(res)
map1.moveToLocation({//移动地图至指定经纬度
latitude: res.latitude,
longitude: res.longitude,
success: (res1) => {
that.markers.splice(0, 1);
that.scale = 16;
that.latitude = res.latitude;
that.longitude = res.longitude;
let oldmak = that.markers;
that.markers = [{
id: 0,
latitude: res.latitude,
longitude: res.longitude,
iconPath: '../../static/images/user-site.png',
width: 40,
height: 40
}, ...oldmak];
},
fail: (err1) => {
console.log(err)
}
})
},
fail(e) {
console.log(e)
uni.showModal({
content: "您未开启手机定位功能，请先开启定位功能！",
showCancel: false
});
}
});
} else {
uni.showModal({
content: "您未开启定位权限，请先开启定位权限！",
confirmText: '前往设置',
success: function(res) {
if (res.confirm) {
permision.gotoAppPermissionSetting()
}
}
});
}
},
getMarks(type) {
var that = this;
if (type === 1) {
this.kk_active = true;
this.jk_active = false;
} else {
this.kk_active = false;
this.jk_active = true;
}
app._post(bayonetApi.findBayonet + '?bayonetType=' + type,
function(e) {
console.log(e);
let arrs = [];
arrs.push(that.markers[0]);
e.map((item, index) => {
arrs.push({
id: item.bayonetId,
latitude: parseFloat(item.latitude),
longitude: parseFloat(item.longitude),
title: item.bayonetName,
iconPath: type === 1 ? '../../static/images/kk_site.png' : '../../static/images/jk_site.png',
width: 30,
height: 30
})
})
that.markers = arrs; //map组件必须重新赋值markers才会更新地图标记
that.$forceUpdate();
console.log(that.markers);
},
function(e) {
console.log(e)
}
)
},
toDetail(item) {
let params = {
targetType: 4,
targetId: item.bayonetInformationId
}
console.log(params);
uni.navigateTo({
url: '/pages/bayonet/detail?params=' + JSON.stringify(params)
})
},
confirm() {
mapSearch.poiSearchNearBy({//检索周边地址
point: {
latitude: this.latitude,
longitude: this.longitude
},
key: this.searchValue,
radius: 3000
}, (res) => {
console.log(res)
res.poiList.map((item) => {
let ine = item.name.indexOf('\\');
let ine1 = item.address.indexOf('\\');
if (ine > 0) {
item.name = item.name.substring(0, ine);
}
if (ine1 > 0) {
item.address = item.address.substring(0, ine1);
}
item.distance = app.highPrecisionDiv(item.distance, 1000)
})
this.addressList = res.poiList;
this.showSearch = true;
})
},
closeSearch() {
this.showSearch = false;
},
showSearchView() {
this.showView = !this.showView;
},
selAddress(item) {
this.showSearch = false;
let map1 = uni.createMapContext('map1', this);
var that = this;
map1.moveToLocation({ //移动地图至指定经纬度
latitude: item.location.latitude,
longitude: item.location.longitude,
success: (res1) => {
that.scale = 16;
let oldmak = that.markers;
oldmak.splice(1, 1, {
id: -1,
latitude: item.location.latitude,
longitude: item.location.longitude,
iconPath: '../../static/images/bayonet_address.png',
width: 30,
height: 40
});
that.latitude = item.location.latitude;
that.longitude = item.location.longitude;
that.markers = [...oldmak];
},
fail: (err1) => {
console.log(err)
}
})
}
}
}
</script>
<style>
@import url("/li.css");
.bg-page {
position: relative;
}
.ym-ac-cont {
position: absolute;
z-index: 1000;
bottom: 0;
left: 0;
width: 750rpx;
background-color: #FFFFFF;
flex-direction: column;
align-items: center;
justify-content: center;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
}
.ym-search {
width: 700rpx;
margin-bottom: 20rpx;
flex-direction: row;
align-items: center;
background-color: #F5F5F5;
height: 100rpx;
border-radius: 50rpx;
padding: 0 20rpx;
}
.ym-search-input {
height: 80rpx;
width: 600rpx;
margin-left: 20rpx;
font-size: 32rpx;
}
.ym-ac-list {
width: 710rpx;
flex-direction: row;
padding: 20rpx;
border-bottom-width: 1rpx;
border-color: #e6e6e6;
border-style: solid;
}
.ym-ac-title {
font-size: 32rpx;
lines: 3;
text-overflow: ellipsis;
}
.ym-ac-item {
flex-direction: column;
flex: 1;
}
.ym-ac-bot {
flex: 1;
flex-direction: row;
align-items: flex-end;
}
.icon {
width: 30rpx;
height: 30rpx;
}
.ym-fubox {
flex-direction: column;
position: absolute;
left: 0;
bottom: 300rpx;
width: 280rpx;
}
.ym-fu-item {
width: 280rpx;
height: 100rpx;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: white;
border-top-right-radius: 50rpx;
border-bottom-right-radius: 50rpx;
}
.ym-site {
width: 100rpx;
height: 100rpx;
border-radius: 50rpx;
background-color: white;
position: absolute;
bottom: 300rpx;
right: 20rpx;
flex-direction: row;
align-items: center;
justify-content: center;
}
.ym-address {
position: absolute;
flex-direction: column;
left: 50rpx;
right: 50rpx;
top: 200;
width: 650rpx;
background-color: #FFFFFF;
z-index: 1000;
padding: 20rpx;
border-radius: 20rpx;
}
.ym-address-list {
flex-direction: row;
justify-content: space-between;
padding: 20rpx;
border-bottom-width: 1rpx;
border-color: #E6E6E6;
border-style: solid;
}
.ym-address-close {
flex-direction: row;
align-items: center;
justify-content: center;
height: 90rpx;
background-color: #F5F5F5;
border-radius: 10rpx;
}
</style>
6124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
