ebike-ui/ebike-maintenance/pages/map/map-findbike.vue

<template>
	<div >
		<div class="divLowerLeft">
			<div class="divBtn">
				<div class="divBtnTitle">
					<uni-icons custom-prefix="iconfont" type="icon-ebikejia" :color="iconcolor" :size="iconsize"
						@click="onZoom('out')" />
				</div>
				<div class="divBtnTitle">
					<uni-icons custom-prefix="iconfont" type="icon-ebikejian" :color="iconcolor" :size="iconsize"
						@click="onZoom('in')" />
				</div>
				<div class="divBtnTitle" style="padding-bottom: 10px;" @click="getLocation">
					<uni-icons custom-prefix="iconfont" type="icon-ebikedingwei2" :color="iconcolor" :size="iconsize" />
				</div>
		
			</div>
		</div>
		<map id="mapRef" ref="mapRef" show-location style="width: 100%;height: 100vh;" :scale="scale"  :markers="markers"
		 :longitude="mapcenter.longitude" :latitude="mapcenter.latitude" :polyline="polylines"/>
		
	</div>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref,
    onMounted,
    getCurrentInstance,
    nextTick
	} from "vue";
	import * as map from "@/utils/map.js";
  import AMapWX from "@/utils/amap-wx.130";
  var amapsdk = new AMapWX({
    key: map.sdkKey
  });

	const mapRef=ref("mapRef");
	let oMap=null;
	const scale=ref(15);
	const markers=ref();
	const mapcenter=ref({
		longitude:"",latitude:""
	})
  const polylines = ref([]);
	
	onMounted(()=>{
		oMap= map.getMap("mapRef",getCurrentInstance());
    pathPlanning()
	});
	
	onLoad((option) => {
		const {longitude:lng,latitude:lat} = option;
		mapcenter.value={longitude:lng,latitude:lat};
		const arrPoints=markers.value||[];
		arrPoints.push(map.addMarker(arrPoints.length,lng,lat,"bike-choose.png"));
		markers.value=arrPoints;
	});

	//地图缩放
	const onZoom = (lx) => {
		switch (lx) {
			case "out":
				scale.value=scale.value+1;
				break;
			case "in":
				scale.value=scale.value-1;
				break;
		}
	};
	
	//定位
	const getLocation = () => {
		map.getLoalcation(oMap, (res) => {
        const {
          latitude,
          longitude
        } = res;
		})
	}

  //路线规划
  const pathPlanning = () => {

    map.getLoalcation(oMap, (res) => {
      const {
        latitude: slat,
        longitude: slng
      } = res;

      const options = {
        mapsdk:amapsdk,
        slng,
        slat,
        elng:mapcenter.value.longitude,
        elat:mapcenter.value.latitude,
        success: (res) => {
          let {
            arrPoint,
            distance
          } = res;

          oMap.includePoints({
            points: arrPoint,
            padding: [50, 50, 50, 50], // 视野边缘与点的间距
            success: () => {
              polylines.value = [map.addLine("#1082FF", arrPoint)]
              console.log(oMap)
            }
          });
        },
        fail: (res) => {
          console.log("fail", res);
        }
      }

      map.direction(options)

    },null, true)

  }


</script>

<style scoped>
	.divLowerLeft {
		position: absolute;
		z-index: 100;
		left: 10px;
		bottom: 30vh;
	}
	
	.divBtn {
		background-color: white;
		font-size: 12px;
		border-radius: 5px;
		margin-bottom: 5px;
		text-align: center;
		border: 1px solid #80808061;
		padding: 0px 10px;
	}
	
	.divBtnTitle {
		padding-top: 10px;
	}
	
</style>