119 lines
2.4 KiB
Vue
119 lines
2.4 KiB
Vue
<template>
|
|
<view class="divmap" :style="{height:mHeight}">
|
|
<view>{{mapprops.longitude}}</view>
|
|
<map id="map" style="width: 100%;height: 100%;" :latitude="mapprops.latitude" :longitude="mapprops.longitude"
|
|
@tap="onMapTap"/>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import QQMapWX from "qqmap-wx-jssdk";
|
|
import {
|
|
onMounted,
|
|
ref
|
|
} from "vue";
|
|
const props=defineProps([{
|
|
"mHeight":{default:"100vh"}, //地图高度
|
|
mapprops:{
|
|
longitude:"",
|
|
latitude:""
|
|
}
|
|
}]);
|
|
|
|
const oWin = this;
|
|
|
|
const onMapTap=(e)=>{
|
|
|
|
}
|
|
|
|
//定位
|
|
const setMapLoalcation=(success,fail)=>{
|
|
uni.getLocation({
|
|
type: 'gcj02', // 返回可以用于 wx.openLocation 的经纬度
|
|
geocode: true,
|
|
success(res) {
|
|
success( res);
|
|
},
|
|
fail(res){
|
|
if(fail) fail(res);
|
|
}
|
|
});
|
|
}
|
|
|
|
//逆解析地址
|
|
const mapreverseGeocoder = (longitude,latitude,success,fail) => {
|
|
qqmapsdk.reverseGeocoder({
|
|
location: {
|
|
latitude: latitude,
|
|
longitude: longitude
|
|
},
|
|
success: (res) => {
|
|
if(success) success(res.result);
|
|
},
|
|
fail: (res) => {
|
|
if(fail) success(fail);
|
|
}
|
|
})
|
|
}
|
|
|
|
//打点
|
|
|
|
defineExpose({setMapLoalcation,mapreverseGeocoder});
|
|
</script>
|
|
<style scoped>
|
|
@import url("map-view.css");
|
|
</style>
|
|
<!-- <template>
|
|
<view style="width: 100%;height: 100vh;">
|
|
<view></view>
|
|
<map class="map" :scale="scale?scale:d_scale" :longitude="longitude?longitude:d_longitude" :latitude="latitude?latitude:d_latitude"></map>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import QQMapWX from "qqmap-wx-jssdk";
|
|
import { onMounted } from "vue";
|
|
import {getLoalcation} from "@/utils/map.js";
|
|
|
|
const props = defineProps(["scale", "longitude", "latitude"]);
|
|
let d_scale="13";
|
|
let d_longitude="";
|
|
let d_latitude="";
|
|
|
|
onMounted(()=>{
|
|
//获取当前定位
|
|
getLoalcation((res)=>{
|
|
const{latitude:lat,longitude:lng}=res
|
|
d_longitude=lat;
|
|
d_latitude=lng;
|
|
});
|
|
})
|
|
var qqmapsdk = new QQMapWX({
|
|
key: 'BECBZ-EJIEQ-LUU5N-B5ISQ-3TLMZ-BXFLG' // 必填
|
|
});
|
|
|
|
//逆解析地址
|
|
const reverseGeocoder = (longitude,latitude,success,fail) => {
|
|
qqmapsdk.reverseGeocoder({
|
|
location: {
|
|
latitude: latitude,
|
|
longitude: longitude
|
|
},
|
|
success: (res) => {
|
|
if(success) success(res.result);
|
|
},
|
|
fail: (res) => {
|
|
if(fail) success(fail);
|
|
}
|
|
})
|
|
}
|
|
|
|
//可调用方法
|
|
defineExpose({
|
|
reverseGeocoder
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
@import url("map-view.css");
|
|
</style> --> |