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.
192 lines
12 KiB
192 lines
12 KiB
3 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1" >
|
||
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
||
|
|
<meta http-equiv="Pragma" content="no-cache" />
|
||
|
|
<meta http-equiv="Expires" content="0" />
|
||
|
|
<title>loading</title>
|
||
|
|
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=R4TBZ-QCH3S-25DOQ-6BZZ3-MGRDV-63BUG"></script>
|
||
|
|
<script type="text/javascript" src="src/utils/import-util.js"></script>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
html,
|
||
|
|
body {
|
||
|
|
height: 100%;
|
||
|
|
margin: 0px;
|
||
|
|
padding: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#map__box {
|
||
|
|
position: absolute;
|
||
|
|
max-width: 767px;
|
||
|
|
top: 48px;
|
||
|
|
height: calc(100vh - 130px);
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer__box {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
z-index: 4000;
|
||
|
|
background: #ffffff;
|
||
|
|
max-width: 767px;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer--title {
|
||
|
|
width: 100%;
|
||
|
|
padding: 19px 16px 17px 18px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border: 0 solid rgba(0, 0, 0, 0.10);
|
||
|
|
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer--name {
|
||
|
|
font-size: 17px;
|
||
|
|
color: #111111;
|
||
|
|
display: block;
|
||
|
|
margin-right: 70px;
|
||
|
|
word-wrap: break-word;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer--address {
|
||
|
|
font-size: 13px;
|
||
|
|
color: #666666;
|
||
|
|
display: block;
|
||
|
|
margin-top: 4px;
|
||
|
|
margin-right: 70px;
|
||
|
|
word-wrap: break-word;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-btn {
|
||
|
|
display: block;
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
margin-top: -30px;
|
||
|
|
right: 16px;
|
||
|
|
width: 60px;
|
||
|
|
height: 60px;
|
||
|
|
border-radius: 60px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="app"
|
||
|
|
v-cloak>
|
||
|
|
<van-nav-bar title=""
|
||
|
|
left-text="返回"
|
||
|
|
left-arrow
|
||
|
|
fixed
|
||
|
|
placeholder
|
||
|
|
@click-left="$router.back()">
|
||
|
|
</van-nav-bar>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="map__box"></div>
|
||
|
|
|
||
|
|
<div class="footer__box">
|
||
|
|
<div class="footer--title">
|
||
|
|
<span class="footer--name"
|
||
|
|
id="name"></span>
|
||
|
|
<span class="footer--address"
|
||
|
|
id="address"></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="footer-btn">
|
||
|
|
<a id="footer-a"
|
||
|
|
style="cursor:pointer;width: 100%; height:100%;display: block;"
|
||
|
|
href="">
|
||
|
|
<img style="height:60px;width:60px;top:50%;"
|
||
|
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk5NDE3OUY1NzczRTExRUJCRTM5ODExRTRCNDM2NkQ5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk5NDE3OUY2NzczRTExRUJCRTM5ODExRTRCNDM2NkQ5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTk0MTc5RjM3NzNFMTFFQkJFMzk4MTFFNEI0MzY2RDkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTk0MTc5RjQ3NzNFMTFFQkJFMzk4MTFFNEI0MzY2RDkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6dcr51AAAUX0lEQVR42uxcCXhV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
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var name = WxConfig.map.name
|
||
|
|
|
||
|
|
var address = WxConfig.map.address
|
||
|
|
var key = WxConfig.map.key
|
||
|
|
var zoom = WxConfig.map.zoom
|
||
|
|
|
||
|
|
var x = WxConfig.map.x
|
||
|
|
var y = WxConfig.map.y
|
||
|
|
|
||
|
|
// 网页名字
|
||
|
|
document.title = name
|
||
|
|
|
||
|
|
// 标注点名字
|
||
|
|
document.getElementById("name").innerText = name
|
||
|
|
|
||
|
|
// 标注点地址
|
||
|
|
document.getElementById("address").innerText = address
|
||
|
|
|
||
|
|
// 导航目的地
|
||
|
|
document.getElementById("footer-a").href = 'https://apis.map.qq.com/tools/routeplan/eword=' + name + '&epointx=' + x + '&epointy=' + y + '?referer=myapp&key=' + key
|
||
|
|
|
||
|
|
//初始化地图
|
||
|
|
var map = new TMap.Map("map__box", {
|
||
|
|
center: new TMap.LatLng(y, x), // 设置中心点坐标
|
||
|
|
zoom: zoom // 地图缩放层级
|
||
|
|
})
|
||
|
|
|
||
|
|
//初始化marker
|
||
|
|
var marker = new TMap.MultiMarker({
|
||
|
|
id: "marker-layer", // 图层id
|
||
|
|
map: new TMap.Map("map__box", {
|
||
|
|
center: new TMap.LatLng(y, x), // 设置中心点坐标
|
||
|
|
zoom: zoom // 地图缩放层级
|
||
|
|
}),
|
||
|
|
styles: { // 点标注的相关样式
|
||
|
|
marker: new TMap.MarkerStyle({
|
||
|
|
width: 35,
|
||
|
|
height: 35,
|
||
|
|
anchor: { x: 16, y: 32 },
|
||
|
|
src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerNew.png"
|
||
|
|
})
|
||
|
|
},
|
||
|
|
geometries: [
|
||
|
|
{ //点标注数据数组
|
||
|
|
id: "demo",
|
||
|
|
styleId: "marker",
|
||
|
|
position: new TMap.LatLng(y, x),
|
||
|
|
properties: {
|
||
|
|
title: "marker"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
})
|
||
|
|
|
||
|
|
//移除缩放按钮
|
||
|
|
map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM)
|
||
|
|
|
||
|
|
Vue.createApp({
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
}
|
||
|
|
}).use(store)
|
||
|
|
.use(VueConfig)
|
||
|
|
.use(VueRouter.createRouter({
|
||
|
|
history: VueRouter.createWebHashHistory(),
|
||
|
|
routes: []
|
||
|
|
})).mount('#app');
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</html>
|