通过【leaflet】 调用高德离线瓦片地图
官网:https://leafletjs.com/
首先在官网下载【leaflet.css】和【leaflet.js】
引用js和css
<link href="js/leaflet.css" rel="stylesheet" />
<script src="js/leaflet.js" type="text/javascript"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
//设置地图大小样式
#container {
height: 100vh;
width: 180vh;
} .custom-content-marker {
position: relative;
width: 25px;
height: 34px;
} .custom-content-marker img {
width: 35px;
height: 100%;
} .custom-content-marker .close-btn {
position: absolute;
top: -6px;
right: -8px;
width: 15px;
height: 15px;
font-size: 12px;
background: #ccc;
border-radius: 50%;
color: #fff;
text-align: center;
line-height: 15px;
box-shadow: -1px 1px 1px rgba(10, 10, 10, .2);
} .custom-content-marker .close-btn:hover {
background: #666;
} </style>
HTML
<div id='container'></div>
JS加载地图
<script type="text/javascript">
$(function () {
//此处为加载瓦片图片
var grayscaleLayer = new
L.TileLayer('bmap_offline_demo/tiles/{z}/{x}/{y}.png',
{
noWrap: false
});
//创建地图
map = new L.map('container', {
minZoom: 1,
maxZoom: 20,
tileSize: 256,
center: [34.742125, 118.020341],
zoom: 18,
zoomDelta: 0.3,//点击+-按钮的放缩刻度尺度,默认值1
zoomSnap: 0.3,//地图能放缩的zoom的最小刻度尺度,默认值1
fullscreenControl: false,//全屏控件,不显示
zoomControl: false,//放大缩小控件,不显示
attributionControl: false,//右下角属性控件,不显示
contiunousWorld: true
});
map.addLayer(grayscaleLayer);
//创建自定义marker,此处marker显示的是图标
var icon1 =new L.divIcon({
html: '<div class="custom-content-marker"><img src="img/mapicon/AR.png"></div>',
className: 'i1',//如果有多个样式这个名称必须要加
});
var marker1 = new L.marker([纬度, 经度], { icon: icon1 });
var markerss = [];
//如果有多个那么就push多个//markerss.push(marker2);markerss.push(marker3);.。。。。。
markerss.push(marker1);
var citiesLayer = new L.layerGroup(markerss);
map.addLayer(citiesLayer);
/点击事件
marker1.on('click',e=>{
alert(点击);
})
})
</script>
通过【leaflet】 调用高德离线瓦片地图的更多相关文章
- OpenLayers加载高德地图离线瓦片地图
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer加载谷歌地球离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/openla ...
- OpenLayers加载谷歌地球离线瓦片地图
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer加载谷歌地球离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/openla ...
- OpenLayers加载百度离线瓦片地图(完美无偏移)
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer完美无偏移加载百度离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/ope ...
- openlayers离线瓦片地图开发
近期业务繁忙...待更新
- Google Map API V3调用arcgis发布的瓦片地图服务
由于最近项目需要用到CAD制作的地图,但之前一直使用的是用谷歌离线瓦片地图的方式,怎么样把CAD图像地图一样有缩放,移动的功能放到网页显示成了难题, 原先的谷歌地图的代码难道就不能用了?重新写一套代码 ...
- openlayers应用(二):加载百度离线瓦片
上一篇文章介绍了使用openlayers3加载百度在线地图,对某些项目或应用场景比如不允许上外网的单位,某些项目只针对一定区域地图加载应用,比如一个县的地图,可以采用下载百度瓦片地图,在服务器或者本机 ...
- Leaflet 调用百度瓦片地图服务
在使用 leaflet 调用第三方瓦片地图服务的项目,主要谷歌地图.高德地图.百度地图和 OSM 地图,与其他三种地图对比,百度地图的瓦片组织方式是不同的.百度从中心点经纬度(0,0)度开始计算瓦片, ...
- OpenLayers学习笔记(一)—在线加载谷歌影像地图&离线加载本地瓦片地图
实现根据在线离线判断加载地图, 在线加载谷歌影响地图, 离线加载本地瓦片地图 作者: 狐狸家的鱼 Github: 八至 html代码 <div id="map" tabind ...
- java调用高德地图api实现通过ip定位访问者的城市
所需东西:高德地图的key 注意:这个key是 web服务的key 和js的key不是一个key(若没有则自行创建,创建教程在文末) 高德地图的api文档:https://lbs.amap.com/ ...
- 移动端H5地图离线瓦片方案(1)(2)
2在作者另一篇 移动端H5地图离线瓦片方案 文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 移动端的网速和 ...
随机推荐
- linux扩展与缩减lv大小
在线扩展lv 给vg添加新的pv并扩展lv大小 将新加磁盘生成pv pvcreate /dev/sdd 将pv加入vg vgextend vg_name /dev/sdd 先扩展lv物理边界,大小增加 ...
- 搭建ftp服务器的超详细步骤
第一步:打开控制面板. 1.1选择程序这个选项. 1.2选择启用或关闭window功能 1.3勾选如图有红箭头的这几个选项. 第二步:搜索iis且将其打开 . 2.1点击网站,且点击添加网站 物理路径 ...
- PyTables文件格式、PyTables 文件支持的数据类型
翻译自 https://www.pytables.org/usersguide/file_format.html,http://www.pytables.org/usersguide/datatype ...
- 在LUbuntu上搭建Neovim+LaTeX环境
目录 安装.配置vimtex 安装texlive 安装zathura 安装.配置vimtex Plug 'lervag/vimtex' let g:tex_flavor= 'latex' " ...
- gorm去重查询 iris框架
写练习 demo 时遇到需要进行去重查询,gorm没有db.distinct()的写法 // 数据库的表字段 type Pro_location_relation struct { Id int64 ...
- Anaconda配置环境变量
环境变量里写自己的Anaconda下载目录,找到对应的文件位置,然后把这三个上移到最上面,点击确定即可配置完成 出现这个环境变量就成功啦 在输入conda 出现这个就表明你的Anaconda已经好了
- SpringCloud组件:搭建Eureka服务注册中心,搭建的时候一定要确保springboot和springCloud的版本对应
搭建的时候一定要确保springboot和springCloud的版本对应,不然会报下面的错 查看版本对应得地址:https://start.spring.io/actuator/info 改了对应得 ...
- [AGC033C] Removing Coins
个人思路: 每轮会删掉除选定节点外的所有叶子节点. 黑白染色,但是不会推 SG 函数. 然后就不会了. 正解: 每次直径长度 \(-1\) 或 \(-2\).\(0\) 必胜,\(1\) 必败,\(2 ...
- 1792. 最大平均通过率 (Medium)
问题描述 1792. 最大平均通过率 (Medium) 一所学校里有一些班级,每个班级里有一些学生,现在每个班都会进行一场期末考试.给你一个二维数组 classes ,其中 classes[i] = ...
- 【python学习】数据结构第一节
1.访问元组或列表中的值 (注:元素是从0开始从左往有编号的,或者从右向左编号[-1开始]) 列表 x1 = [1,2,3,4] 元组 x2 =(1,2,3,4) print(x2[0]) ...