当前位置:网站首页>Leaflet map
Leaflet map
2022-07-06 06:08:00 【28 hours a day】
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""
/>
<script
src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""
></script>
<!--
* @author: zhanggenyuan
* @Description:
* @Date: 2022-06-09 11:02:26
* @LastEditTime: 2022-06-09 11:54:15
* @FilePath: \h5\src\views\drainage\map\index.vue
-->
<template>
<div id="map" style="width: 100vw; height: 100vh"></div>
</template>
<script>
export default {
mounted() {
this.init();
},
methods: {
init() {
let map = L.map("map", {
minZoom: 3,
maxZoom: 14,
center: [34.75, 113.62],
zoom: 12,
zoomControl: true,
attributionControl: true,
crs: L.CRS.EPSG3857,
});
this.map = map; //data Need to mount on
window.map = map;
L.tileLayer(
"http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
).addTo(map);
var myIcon = L.icon({
iconUrl:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi-1.lanrentuku.com%2F2020%2F9%2F27%2Fd55df8c1-a613-4086-a8a0-dc2e13cf4c30.png%3FimageView2%2F2%2Fw%2F500&refer=http%3A%2F%2Fi-1.lanrentuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657337337&t=0ed459d27df9f36d6c30c0dcad47acfc",
iconSize: [28, 48],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
shadowSize: [68, 95],
shadowAnchor: [22, 94],
});
let marker = L.marker([34.75, 113.62], { icon: myIcon })
.addTo(map);
marker
.bindPopup(
" Hello I'm a pop-up "
)
.addTo(map);
},
},
};
</script>
<style>
.mypopup {
bottom: -120px !important;
left: -81px !important;
}
.mypopup .leaflet-popup-content-wrapper {
width: 160px;
height: 160px;
border-radius: 50%;
border: 55px solid rgb(83, 115, 145);
background-color: rgba(0, 0, 0, 0.24);
}
.cd-span {
position: absolute;
width: 30px;
font-size: 14px;
text-align: center;
line-height: 15px;
}
.cd-span:nth-child(1) {
color: #fff;
top: 13px;
left: 65px;
}
.cd-span:nth-child(1):active {
color: rgb(152, 199, 218);
}
.cd-span:nth-child(1):before {
content: "";
position: absolute;
width: 40px;
height: 1px;
border-bottom: 1px dashed rgb(180, 193, 204);
transform: translate3d(40px, 41px, 0px) rotate(-33deg);
}
.cd-span:nth-child(2) {
color: #fff;
top: 92px;
left: 20px;
}
.cd-span:nth-child(2):active {
color: rgb(152, 199, 218);
}
.cd-span:nth-child(2):before {
content: "";
position: absolute;
width: 40px;
height: 1px;
border-bottom: 1px dashed rgb(180, 193, 204);
transform: translate3d(-6px, -39px, 0px) rotate(30deg);
}
.cd-span:nth-child(3) {
color: #fff;
top: 92px;
left: 110px;
}
.cd-span:nth-child(3):active {
color: rgb(152, 199, 218);
}
.cd-span:nth-child(3):before {
content: "";
position: absolute;
width: 40px;
height: 1px;
border-bottom: 1px dashed rgb(180, 193, 204);
transform: translate3d(-50px, 40px, 0px) rotate(-90deg);
}
</style>
边栏推荐
- CoordinatorLayout+NestedScrollView+RecyclerView 上拉底部显示不全
- Reading notes of effective managers
- Memory and stack related concepts
- [Thesis code] SML part code reading
- Basic knowledge of error
- 【Postman】Collections配置运行过程
- 【C语言】qsort函数
- Baidu online AI competition - image processing challenge: the 8th program of handwriting erasure
- Buuctf-[bjdctf2020]zjctf, but so (xiaoyute detailed explanation)
- ICLR 2022 spotlight | analog transformer: time series anomaly detection method based on correlation difference
猜你喜欢
Web服务连接器:Servlet
H3C防火墙RBM+VRRP 组网配置
Is it difficult for an information system project manager?
(5) Explanation of yolo-v3 core source code (3)
HCIA review
进程和线程的理解
关于 PHP 启动 MongoDb 找不到指定模块问题
Market development prospect and investment risk assessment report of China's humidity sensor industry from 2022 to 2028
Sqlmap tutorial (III) practical skills II
Hongliao Technology: Liu qiangdong's "heavy hand"
随机推荐
【Postman】Collections-运行配置之导入数据文件
(5) Explanation of yolo-v3 core source code (3)
Gtest之TEST宏的用法
GTSAM中ISAM2和IncrementalFixedLagSmoother说明
H3C S5820V2_ Upgrade method after stacking IRF2 of 5830v2 switch
Sqlmap tutorial (III) practical skills II
Grant Yu, build a web page you want from 0
GTSAM中李群的運用
功能安全之故障(fault),错误(error),失效(failure)
Luogu p1460 [usaco2.1] healthy Holstein cows
IP day 16 VLAN MPLS configuration
Zoom through the mouse wheel
Winter 2021 pat class B problem solution (C language)
About PHP startup, mongodb cannot find the specified module
Seven imperceptible truths in software testing
leaflet 地图
The ECU of 21 Audi q5l 45tfsi brushes is upgraded to master special adjustment, and the horsepower is safely and stably increased to 305 horsepower
isam2运行流程
Is it difficult for an information system project manager?
公司视频加速播放