当前位置:网站首页>leaflet 地图
leaflet 地图
2022-07-06 06:00:00 【一天28小时】
<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上需要挂载
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(
"你好 我是弹窗"
)
.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>
边栏推荐
- 数字三角形模型 AcWing 1015. 摘花生
- [ram IP] introduction and experiment of ram IP core
- 入侵检测领域数据集总结
- Station B Liu Erden softmx classifier and MNIST implementation -structure 9
- Market development prospect and investment risk assessment report of China's humidity sensor industry from 2022 to 2028
- Classes and objects (I) detailed explanation of this pointer
- HCIA复习
- IP day 16 VLAN MPLS configuration
- How to use the container reflection method encapsulated by thinkphp5.1 in business code
- 【论文阅读】NFlowJS:基于鲁棒学习的合成负数据密集异常检测
猜你喜欢
网络协议模型
养了只小猫咪
单元测试的意义
GTSAM中李群的運用
Caused by:org.gradle.api.internal.plugins . PluginApplicationException: Failed to apply plugin
Report on the competition status and investment decision recommendations of Guangxi hospital industry in China from 2022 to 2028
Request forwarding and redirection
GTSAM中李群的运用
【微信小程序】搭建开发工具环境
数学三大核心领域概述:代数
随机推荐
2022 software testing workflow to know
[paper reading] nflowjs: synthetic negative data intensive anomaly detection based on robust learning
The difference and usage between continue and break
Memory and stack related concepts
H3C S5820V2_ Upgrade method after stacking IRF2 of 5830v2 switch
How to use the container reflection method encapsulated by thinkphp5.1 in business code
c语言——冒泡排序
【eolink】PC客户端安装
nodejs实现微博第三方登录
异常检测方法总结
【Postman】Collections配置运行过程
Novice entry SCM must understand those things
Some easy-to-use tools make your essay style more elegant
Auto. JS learning notes 17: basic listening events and UI simple click event operations
对数据安全的思考(转载)
公司視頻加速播放
如何在业务代码中使用 ThinkPHP5.1 封装的容器内反射方法
Cognitive introspection
Request forwarding and redirection
Buuctf-[[gwctf 2019] I have a database (xiaoyute detailed explanation)