map.uvue

<template>
  <view class="content">
    <map class="map" id="map1" ref="map1" :longitude="location.longitude" :latitude="location.latitude" :scale="scale" :markers="markers" :include-points="includePoints" :polyline="polyline" :polygons="polygons" :circles="circles" :controls="controls" :show-location="showLocation"
      :enable-3D="enable3D" :rotate="rotate" :skew="skew"
      :show-compass="showCompass" :enable-overlooking="enableOverlooking" :enable-zoom="enableZoom"
      :enable-scroll="enableScroll" :enable-rotate="enableRotate" :enable-satellite="enableSatellite"
      :enable-traffic="enableTraffic"
      @markertap="onmarkertap" @callouttap="oncallouttap" @controltap="oncontroltap" @regionchange="onregionchange" @tap="maptap"
      @updated="onupdated" @poitap="onpoitap"></map>
    <scroll-view class="scrollview" scroll-y="true">
      <view>注意：需要正确配置地图服务商的Key才能正常显示地图组件</view>
      <view class="uni-title">
        <text class="uni-title-text">属性示例</text>
      </View>
      <input-data defaultValue="13" title="scale: 缩放级别，取值范围为5-18" type="number" @confirm="confirm_scale_input"></input-data>
      <boolean-data :defaultValue="showLocation" title="开启显示带有方向的当前定位点" @change="change_show_location"></boolean-data>

      <button class="button" @click="addControls">控件</button>
      <button class="button" @click="addMarkers">标记点</button>
      <button class="button" @click="addMarkersLabel">为标记点旁边增加标签</button>
      <button class="button" @click="addPolyline">路线</button>
      <button class="button" @click="addPolygons">多边形</button>
      <button class="button" @click="addCircles">圆</button>
      <button class="button" @click="includePoint">缩放视野以包含所有给定的坐标点</button>
      <view class="uni-title">
        <text class="uni-title-text">方法示例</text>
      </View>
      <button class="button" @click="handleGetCenterLocation">获取当前地图中心的经纬度</button>
      <button class="button" @click="handleGetRegion">获取当前地图的视野范围</button>
      <button class="button" @click="handleTranslateMarker">平移marker</button>
      <button class="button" @click="handleMoveToLocation">将地图中心移动到当前定位点</button>
      <button class="button" @click="handleGetScale">获取当前地图的缩放级别</button>

    </scroll-view>
  </view>
</template>

<script setup lang="uts">
  type Anchor = {
    x : number,
    y : number
  }

  type Callout = {
    content : string,
    color : string,
    fontSize : number,
    borderRadius : number,
    borderWidth : number,
    borderColor : string,
    bgColor : string,
    padding : number,
    display : string
  }

  type Label = {
    content : string,
    color : string,
    fontSize : number,
    x : number,
    y : number,
    borderColor: string
    borderWidth : number,
    borderRadius: number,
    bgColor : string,
    padding:number
  }

  type Markers = {
    id : number,
    latitude : number,
    longitude : number,
    title ?: string,
    iconPath : string,
    zIndex ?: string,
    rotate ?: number,
    width ?: number,
    height ?: number,
    label?:Label,
    anchor ?: Anchor,
    callout ?: Callout
  }

  type Points = {
    latitude : number,
    longitude : number
  }

  type Polyline = {
    points : Points[],
    color : string,
    width : number,
    dottedLine : boolean,
    arrowLine : boolean,
    borderColor : string,
    borderWidth : number
  }

  type Polygons = {
    points : Points[];
    fillColor : string;
    strokeWidth : number;
    strokeColor : string;
    zIndex : number;
  }

  type Circles = {
    latitude : number;
    longitude : number;
    radius : number;
    strokeWidth : number;
    color : string;
    fillColor : string;
  }

  type PositionType = {
  	left: number,
  	top: number,
  	width: number,
  	height: number
  }

  type ControlsType = {
  	id?: number;
  	position: PositionType;
    iconPath:string;
  	clickable?: boolean;
  }

  type TypeJestResult = {
    translateMarkerMsg:string,
    animationEnd:boolean,
    centerPoints: Points,
    southwest: Points,
    northeast: Points,
    moveToLocationMsg:string,
    scale:number
  }

  const testMarkers = [{
    id: 0,
    latitude: 39.989631,
    longitude: 116.481018,
    title: '方恒国际 阜通东大街6号',
    zIndex: '1',
    iconPath: '../../../static/location.png',
    rotate: 0,
    width: 20,
    height: 20,
    anchor: {
      x: 0.5,
      y: 1
    },
    callout: {
      content: '方恒国际 阜通东大街6号',
      color: '#00BFFF',
      fontSize: 10,
      borderRadius: 4,
      borderWidth: 1,
      borderColor: '#333300',
      bgColor: '#CCFF99',
      padding: 5,
      display: 'ALWAYS'
    }
  },
  {
    id: 1,
    latitude: 39.9086920000,
    longitude: 116.3974770000,
    title: '天安门',
    zIndex: '1',
    iconPath: '../../../static/location.png',
    width: 40,
    height: 40,
    anchor: {
      x: 0.5,
      y: 1
    },
    callout: {
      content: '首都北京\n天安门',
      color: '#00BFFF',
      fontSize: 12,
      borderRadius:10,
      borderWidth: 2,
      borderColor: '#333300',
      bgColor: '#CCFF11',
      padding: 5,
      display: 'ALWAYS'
    }
  }
  ];


  const testPolyline = [{
    points: [{
      latitude: 39.925539,
      longitude: 116.279037
    },
    {
      latitude: 39.925539,
      longitude: 116.520285
    }],
    color: '#FFCCFF',
    width:7,
    dottedLine: true,
    arrowLine: true,
    borderColor: '#000000',
    borderWidth: 2
  },
  {
    points: [{
      latitude: 39.938698,
      longitude: 116.275177
    },
    {
      latitude: 39.966069,
      longitude: 116.289253
    },
    {
      latitude: 39.944226,
      longitude: 116.306076
    },
    {
      latitude: 39.966069,
      longitude: 116.322899
    },
    {
      latitude: 39.938698,
      longitude: 116.336975
    }],
    color: '#CCFFFF',
    width: 5,
    dottedLine: false,
    arrowLine: true,
    borderColor: '#CC0000',
    borderWidth: 3
  }
  ];

  const testPolygons = [{
    points: [{
      latitude: 39.781892,
      longitude: 116.293413
    },
    {
      latitude: 39.787600,
      longitude: 116.391842
    },
    {
      latitude: 39.733187,
      longitude: 116.417932
    },
    {
      latitude: 39.704653,
      longitude: 116.338255
    }],
    fillColor: '#FFCCFF',
    strokeWidth: 3,
    strokeColor: '#CC99CC',
    zIndex: 11
  },
  {
    points: [{
      latitude: 39.887600,
      longitude: 116.518932
    },
    {
      latitude: 39.781892,
      longitude: 116.518932
    },
    {
      latitude: 39.781892,
      longitude: 116.428932
    },
    {
      latitude: 39.887600,
      longitude: 116.428932
    }
    ],
    fillColor: '#CCFFFF',
    strokeWidth: 5,
    strokeColor: '#CC0000',
    zIndex: 3
  }
  ];

  const testCircles = [{
    latitude: 39.996441,
    longitude: 116.411146,
    radius: 15000,
    strokeWidth: 5,
    color: '#CCFFFF',
    fillColor: '#CC0000'
  },
  {
    latitude: 40.096441,
    longitude: 116.511146,
    radius: 12000,
    strokeWidth: 3,
    color: '#CCFFFF',
    fillColor: '#FFCCFF'
  },
  {
    latitude: 39.896441,
    longitude: 116.311146,
    radius: 9000,
    strokeWidth: 1,
    color: '#CCFFFF',
    fillColor: '#CC0000'
  }
  ];

  const testIncludePoints = [{
    latitude: 39.989631,
    longitude: 116.481018,
  },
  {
    latitude: 39.9086920000,
    longitude: 116.3974770000,
  }
  ];


  const map = ref(null as MapContext | null);
  const location = ref({ longitude: 116.39742, latitude: 39.909 });
  const rotate = ref(0);
  const skew = ref(0);
  // 自动化测试
  const autoTest = ref(false);
  const updateAutoTest = (value: boolean) => {
    autoTest.value = value
  }


  const jestResult = reactive({
    translateMarkerMsg:"",
    animationEnd:false,
    centerPoints: {
      latitude : 0,
      longitude : 0
    },
    southwest: {
      latitude : 0,
      longitude : 0
    },
    northeast: {
      latitude : 0,
      longitude : 0
    },
    moveToLocationMsg:"",
    scale:0,
  } as TypeJestResult);


  onReady(() => {
    map.value = uni.createMapContext("map1", getCurrentInstance()!.proxy!)
  });

  const scale = ref(13);
  const confirm_scale_input = (value: number) => {
    scale.value = value
  };

  const controls = ref([]as ControlsType[]);
  const addControls = () => {
    controls.value.push({
      id: 1,
      position: {
        left: 5,
        top: 180,
        width: 30,
        height: 30
      },
      iconPath: '../../../static/uni.png',
      clickable: true
    })
  }

  const showLocation = ref(false);
  const change_show_location = (checked : boolean)=>{
    showLocation.value = checked
  }

  const includePoints = ref([] as Points[]);
  const includePoint = () => {
    includePoints.value = testIncludePoints;
  };


  const markers = reactive([] as Markers[]);
  const addMarkers = () => {
    markers.push(...testMarkers);
  };

  const addMarkersLabel = () => {
    markers.forEach((marker, index) => {
      marker.label = {
        content: 'Hello Label'+ (index + 1),
        color: '#aa00ff',
        fontSize: 12,
        x: 5,
        y: 0,
        borderColor:'#333300',
        borderWidth:2,
        borderRadius: 20,
        bgColor: '#aaffff',
        padding: 10
      };
    });
  };


  const polyline = ref([] as Polyline[]);
  const addPolyline = () => {
    scale.value = 12;
    polyline.value = testPolyline;
  };


  const polygons = ref([] as Polygons[]);
  const addPolygons = () => {
    scale.value = 10;
    polygons.value = testPolygons;
  };


  const circles = ref([] as Circles[]);
  const addCircles = () => {
    scale.value = 10;
    circles.value = testCircles;
  };

  const showCompass = ref(true);
  const enable3D = ref(true);
  const enableOverlooking = ref(true);
  const enableZoom = ref(true);
  const enableScroll = ref(true);
  const enableRotate = ref(true);
  const enableSatellite = ref(false);
  const enableTraffic = ref(false);

  const enableThreeD = (e)=>{
    enable3D.value = e.detail.value;
  }
  const changeShowCompass = (e)=>{
    showCompass.value = e.detail.value;
  }
  const changeEnableOverlooking = (e) => {
    enableOverlooking.value = e.detail.value;
  };

  const changeEnableZoom = (e) => {
    enableZoom.value = e.detail.value;
  };

  const changeEnableScroll = (e) => {
    enableScroll.value = e.detail.value;
  };

  const changeEnableRotate = (e) => {
    enableRotate.value = e.detail.value;
  };

  const changeEnableSatellite = (e) => {
    enableSatellite.value = e.detail.value;
  };

  const changeEnableTraffic = (e) => {
    enableTraffic.value = e.detail.value;
  };


  const handleGetCenterLocation = () => {
    if (map.value) {
      map.value.getCenterLocation({
        success: ret => {
          // console.log('getCenterLocation',ret);
          jestResult.centerPoints = ret;
          if(!autoTest.value){
            uni.showModal({
              content: JSON.stringify(ret)
            });
          }
        }
      });
    }
  };

  const handleGetRegion = () => {
    if (map.value) {
      map.value.getRegion({
        success: ret => {
          // console.log('getRegion',JSON.stringify(ret));
          jestResult.southwest = ret.southwest;
          jestResult.northeast = ret.northeast
          if(!autoTest.value){
            uni.showModal({
              content: JSON.stringify(ret)
            });
          }
        }
      });
    }
  };


  const handleTranslateMarker = () => {
    if (map.value) {
      map.value.translateMarker({
        markerId: 1,
        destination: {
          latitude: 39.989631,
          longitude: 116.481018
        },
        autoRotate:true,
        rotate:10,
        duration: 2000,
        animationEnd: () => {
          // console.log('动画结束');
          jestResult.animationEnd = true;
        },
        success: ret => {
          // console.log('handleTranslateMarker',JSON.stringify(ret));
          jestResult.translateMarkerMsg = ret.errMsg;
        },
        fail: error => {
          console.log(error)
        }
      });
    }
  };


  const handleGetScale = () => {
    if (map.value) {
      map.value.getScale({
        success: res => {
            // console.log('getScale',res);
            scale.value = res.scale
            jestResult.scale = res.scale
            if(!autoTest.value){
              uni.showModal({
                content: '当前地图的缩放级别为：'+ res.scale
              });
            }
        },
        fail: error => {
            console.log(error)
        },
      });
    }
  };

  const handleMoveToLocation = () => {
    if (map.value) {
      map.value.moveToLocation({
          latitude: 39.909,
          longitude: 116.39742,
          success: res => {
            // console.log('moveToLocation',res);
            jestResult.moveToLocationMsg = res.errMsg;
            if(!autoTest.value){
              uni.showModal({
                content: JSON.stringify(res)
              });
            }
          },
          fail: error => {
            console.log(error)
          }
      });
    }
  };

  const maptap = (e:UniEvent) => {
    // console.log('点击地图时触发',e)
    uni.showModal({
      content: JSON.stringify(e)
    });
  };

  const onmarkertap = (e:UniEvent) => {
    // console.log('点击标记点时触发',e)
    uni.showModal({
      content: JSON.stringify(e)
    });
  };

  const oncontroltap = (e:UniEvent) => {
    // console.log('点击控件时触发',e)
    uni.showModal({
      content: JSON.stringify(e)
    });
  };

  const oncallouttap = (e:UniEvent) => {
    // console.log('点击标记点对应的气泡时触发',e)
    uni.showModal({
      content: JSON.stringify(e)
    });
  };

  const onupdated = (e:UniEvent) => {
    console.log('在地图渲染更新完成时触发',e)
  };

  const onregionchange = (e:UniEvent) => {
    console.log('视野发生变化时触发',e)
  };

  const onpoitap = (e:UniEvent) => {
    // console.log('点击地图poi点时触发',e)
    uni.showModal({
      content: JSON.stringify(e)
    });
  };

  defineExpose({
    jestResult,
    autoTest,
    updateAutoTest,
    addControls,
    addMarkers,
    addMarkersLabel,
    addPolyline,
    addPolygons,
    addCircles,
    includePoint,
    handleGetCenterLocation,
    handleGetRegion,
    handleTranslateMarker,
    handleMoveToLocation,
    handleGetScale
  })

</script>

<style>
  .content {
    flex: 1;
  }

  .map {
    width: 100%;
    height: 300px;
    background-color: #f0f0f0;
  }

  .scrollview {
    flex: 1;
    padding: 10px;
  }

  .list-item {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    padding: 5px 0px;
  }

  .list-text {
    flex: 1;
  }

  .button {
    margin-top: 5px;
    margin-bottom: 5px;
  }
</style>