99 lines
2.1 KiB
Vue
99 lines
2.1 KiB
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"/>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import {
|
||
|
|
onLoad
|
||
|
|
} from "@dcloudio/uni-app";
|
||
|
|
import {
|
||
|
|
ref,onMounted,getCurrentInstance
|
||
|
|
} from "vue";
|
||
|
|
import * as map from "@/utils/map.js";
|
||
|
|
|
||
|
|
const mapRef=ref("mapRef");
|
||
|
|
let oMap=null;
|
||
|
|
const scale=ref(15);
|
||
|
|
const markers=ref();
|
||
|
|
const mapcenter=ref({
|
||
|
|
longitude:"",latitude:""
|
||
|
|
})
|
||
|
|
|
||
|
|
onMounted(()=>{
|
||
|
|
oMap= map.getMap("mapRef",getCurrentInstance());
|
||
|
|
});
|
||
|
|
|
||
|
|
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;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</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>
|