tsg-app/pages/zhjs/subnvue/index.nvue

<template>
    <view class="zhjs-container">
        <u-navbar title="综合监视" :autoBack="true" :titleStyle="{
				fontSize:'18px'
			}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
        </u-navbar>
        <map  :style="{
    		height: windowHeight + 'px',
    		top: '-' + statusBarHeight + 'px'
    	}" id="map" ref="map" :latitude="latitude" :longitude="longitude" :markers="marker"
            :show-location="true" scale="16.5" :enable-satellite="enableSatellite" theme="satellite" @markertap="markertap">

                <cover-image src="/static/tabs/dingwei.png" class="location" @click="onControlTap"></cover-image>
        </map>
         
    </view>
</template>
<script>
    export default {
        data() {
            return {
                latitude: 31.495,
                longitude: 114.767,
                enableSatellite:false,
                markers: [
                  {
                    latitude: 31.4954,
                    longitude: 114.7693,
                    iconPath: '/static/tabs/add.png',
                    width: "25",
                    height: "25",
                    id:1,
                },
                {
                    latitude: 31.4951,
                    longitude: 114.767,
                    iconPath: '/static/tabs/add.png',
                    width: "25",
                    height: "25",
                    id:2,
                }
                ],
                dingwei: '../../static/tabs/dingwei.png',
                map:null,
                windowHeight:0,
                windowHeight:0
            }
        },
        created() {
          let that = this;
          			uni.getSystemInfo({
          				success(res) {
          					that.windowHeight = res.windowHeight;
          					that.windowHeight = res.windowHeight + res.statusBarHeight;
          					that.statusBarHeight = res.statusBarHeight;
          					that.navTop = res.statusBarHeight + 10;
          				}
          			})
        },
        onReady() {
          this.map = uni.createMapContext("map")
        },
        methods: {
          onControlTap(){
            this.$refs.map.moveToLocation({
              latitude: 31.495,
              longitude: 114.767
            })
          },
          markertap(e){
            const newMarker = this.markers
            newMarker.forEach(((item,i) => {
              if(item.id === e.detail.markerId){
                item.height=55;
                item.width=55;
                item.label={
                  content:"测试",
                  color:"#57a7f0",
                  bgColor:"transparent"
                }
              }else{
                item.height=25;
                item.width=25;
               item.label={
                 content:" ",
                 bgColor:"transparent"
               }
              }
            }));
            console.log("newMarker",newMarker);
            this.markers = [...newMarker];
          }
        },
        computed:{
          marker(){
          return this.markers.slice(0)
          }
        }
 }
</script>

<style lang="scss">
   .location{
    position: absolute;
    width: 35px;
    height:35px;
    bottom: 130px;
    left:10px;
    background-color: #fff;
    padding: 5px;
   }
</style>