You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
2.5 KiB
107 lines
2.5 KiB
|
|
<script>
|
|
import { reactive, toRefs, onMounted } from "vue";
|
|
export default {
|
|
props: {
|
|
obj: {
|
|
type: Object,
|
|
default: {},
|
|
},
|
|
|
|
},
|
|
setup(props) {
|
|
let state = reactive({});
|
|
|
|
let methods = {
|
|
init(item) {
|
|
/* function getQueryParamsNew() {
|
|
//console.log(window.location.search)
|
|
const params = new URLSearchParams(window.location.search);
|
|
//console.log(params)
|
|
let paramsObj = {};
|
|
//console.log(params)
|
|
for (const [key, value] of params.entries()) {
|
|
if (paramsObj.hasOwnProperty(key)) {
|
|
if (Array.isArray(paramsObj[key])) {
|
|
paramsObj[key].push(value);
|
|
} else {
|
|
paramsObj[key] = [paramsObj[key], value];
|
|
}
|
|
} else {
|
|
paramsObj[key] = value;
|
|
}
|
|
}
|
|
// console.log(paramsObj)
|
|
return paramsObj;
|
|
}
|
|
var queryParamsNew = getQueryParamsNew();*/
|
|
// state.queryParamsNew = queryParamsNew;
|
|
// console.log(item)
|
|
let queryParamsNew =item
|
|
// console.log(queryParamsNew)
|
|
const lng = queryParamsNew.lng; //经度
|
|
const lat = queryParamsNew.lat; // 纬度
|
|
// 初始化地图
|
|
const center = new qq.maps.LatLng(lat, lng);
|
|
const map = new qq.maps.Map(document.getElementById("map-container"), {
|
|
center,
|
|
zoom: 15,
|
|
});
|
|
|
|
// 创建坐标点
|
|
const marker = new qq.maps.Marker({
|
|
position: center,
|
|
map: map,
|
|
});
|
|
// 创建信息窗口
|
|
const infoWin = new qq.maps.InfoWindow({
|
|
map: map,
|
|
position: center,
|
|
});
|
|
infoWin.setContent(
|
|
`<div class="detailshow" >${queryParamsNew.name}</div>`
|
|
);
|
|
infoWin.open();
|
|
qq.maps.event.addListener(marker, "click", function () {
|
|
infoWin.open();
|
|
infoWin.setContent(
|
|
`<div class="detailshow" >${queryParamsNew.name}</div>`
|
|
);
|
|
infoWin.setPosition(centerLatLng);
|
|
});
|
|
},
|
|
};
|
|
onMounted(() => {
|
|
console.log(props)
|
|
methods.init(props.obj);
|
|
});
|
|
return {
|
|
...toRefs(state),
|
|
...methods,
|
|
};
|
|
},
|
|
components: {},
|
|
};
|
|
</script>
|
|
<template>
|
|
<div class="mapmain">
|
|
<div id="map-container" style="width: 100%; height: 100%"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style >
|
|
/*.layout-sider {
|
|
display: none;
|
|
}
|
|
.layout-main-header {
|
|
display: none;
|
|
}*/
|
|
.mapmain {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.detailshow {
|
|
width: 100%;
|
|
}
|
|
</style>
|