项目需求,在微信小程序的地图中,实现打点,然后点击某个点要能弹出关于这个点的某些信息,同时在当前点跳到其他点时,对应信息也要替换,点击空白处要关闭弹窗,在此做个记录
最终实现效果如图 (展示用的是小程序模拟器,有点小问题,真机调试是正常的,点击某个点时会把这个点设置为中心点,而不是像GIF一样,一直往定位点跳)
废话不多说,直接上代码
<template>
<view>
<map
id="map"
style="width: 100%; height: 100vh;"
:show-location="true"
:latitude="map.latitude"
:longitude="map.longitude"
:scale="map.scale"
:markers="map.markers"
:circles="map.circles"
@markertap="markertap"
@tap="tap"
>
<cover-image class="location" src="/static/img/map/location.png" @click="getLocation"></cover-image>
<cover-image class="record" src="/static/img/map/record.png" @click="shouSleet"></cover-image>
<cover-image class="refresh" src="/static/img/map/refresh.png" @click="loadData"></cover-image>
<lv-select
showValue="name"
uniShadow="true"
@handleSearch="searchHandle"
@change="searchChange"
:infoList="select.infoList"
v-model="select.searchValue"
:loading="select.loading"
:isShowSelect="isShowSelect"
>
</lv-select>
<view v-if="viewshow" class="uni-row-show">
<view class="uni-flex uni-row">
<text>标题:</text>
<view style="-webkit-flex: 1;flex: 1;">
<text style="color: gray;">{
{
map.marker.customData.localAccentTitle}}</text>
</view>
<cover-image class="close" src="/static/img/map/cha.png" @click="closeshow"></cover-image>
</view>
<view class="uni-flex uni-row" style="-webkit-flex: 1;flex: 1;">
<text>描述:</text>
<text>{
{
map.marker.customData.localAccentDescribe}}</text>
</view>
<view class="uni-flex uni-row" style="-webkit-flex: 1;flex: 1;">
<text>时间:</text>
<text>{
{
map.marker.customData.createTime}}</text>
</view>
<view class="uni-flex uni-row" style="-webkit-flex: 1;flex: 1;">
<text>作者:</text>
<text>{
{
map.marker.customData.createPeople}}</text>
</view>
<view class="audio" v-if="audioShow">
<imt-audio :src="map.marker.customData.path"></imt-audio>
</view>
</view>
</map>
</view>
</template>
<script>
import lvSelect from 'components/lv-select/lv-select' //搜索组件
import imtAudio from 'components/imt-audio/imt-audio'; //音频播放组件
import {
mapState, mapMutations } from 'vuex'
export default {
components: {
imtAudio, lvSelect},
data() {
return {
viewshow: false,
audioShow: false,
isShowSelect