004 Leaflet 第四个demo 使用自己的图标替换marker图标

一、使用到的文件

leaflet.css

jquery-1.11.1.min.js

leaflet.js

leaf-green.png

leaf-orange.png

leaf-red.png

leaf-shadow.png

这个列子挺简单的，用的官网给的出的列子，图片也可以从官网找到。

二、源码

<!DOCTYPE html>
<html>
<head><title>使用自己的图标替换marker图标</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
</head><body><div id="map" style="width:500px;height:500px;"></div><script type="text/javascript">$(function(){var map = L.map('map', {center: [40, 100],zoom: 4});// 影像
        L.tileLayer("http://t{s}.tianditu.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", {subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]}).addTo(map);// 地名标注
        L.tileLayer("http://t{s}.tianditu.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", {subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]}).addTo(map);// 边界
        L.tileLayer("http://t{s}.tianditu.cn/ibo_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ibo&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", {subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]}).addTo(map);// 使用用户自己的图标var greenIcon = L.icon({iconUrl: 'leaf-green.png',shadowUrl: 'leaf-shadow.png',iconSize:     [38, 95], // size of the icon
            shadowSize:   [50, 64], // size of the shadow
            iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
            shadowAnchor: [4, 62],  // the same for the shadow
            popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
        });L.marker([40, 112], {icon: greenIcon}).addTo(map);var LeafIcon = L.Icon.extend({options: {shadowUrl: 'leaf-shadow.png',iconSize:     [38, 95],shadowSize:   [50, 64],iconAnchor:   [22, 94],shadowAnchor: [4, 62],popupAnchor:  [-3, -76]}});var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}),redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}),orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});L.icon = function (options) {return new L.Icon(options);};L.marker([41.5, 99.09], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");L.marker([41.495, 100.083], {icon: redIcon}).addTo(map).bindPopup("I am a red leaf.");L.marker([41.49, 101.1], {icon: orangeIcon}).addTo(map).bindPopup("I am an orange leaf.");});
</script>
</body>
</html>

三、效果图

转载于:https://www.cnblogs.com/zsslll/p/6708211.html

004 Leaflet 第四个demo 使用自己的图标替换marker图标相关推荐

python 图标字体_Icon-font图标字体的四类制作方法
FontAwesome经历了两年的进化,如今已成为不少工具性应用开发者的首选.但FontAwesome的图标毕竟有限,在某些特定的情景中,FontAwesome的字体并不能准确地传达合适的意义.为自己 ...
vue2中使用Leaflet实现单个或多个marker图标
vue2中使用Leaflet实现单个或多个marker图标初始化一个vue项目在 vue 中安装 Leaflet 在main.js中引入leaflet 加载一个简单的地图框架添加一个或多个Mar ...
leaflet 单个或者多个marker图标切换清除
原文地址 https://xiegaosheng.com/post/view?id=74 leaflet.js中清除marker图标,切换marker位置查看官方文档单个marker点的位置切换直接 ...
js中把字符串第四个到第五个字符替换成#
js中把字符串第四个到第五个字符替换成# substring 方法返回位于 String 对象中指定位置的子字符串. strVariable.substring(start, end) " ...
不忘初“芯”，共创未来！安创成长营四期Demo Day圆满落幕
2017年12月21日,安创成长营第四期DemoDay在杭州城中香格里拉拉开帷幕.在本次展示日上,16家人工智能及物联网领域创新创业团队,向业界展示了他们各自的创新成果及技术实力.数百数位业内有影响力 ...
gRPC学习记录(四)--官方Demo
了解proto3后,接下来看官方Demo作为训练,这里建议看一遍之后自己动手搭建出来,一方面巩固之前的知识,一方面是对整个流程更加熟悉. 官方Demo地址: https://github.com/gr ...
grpc简单使用 java_gRPC学习记录(四)-官方Demo - Java 技术驿站-Java 技术驿站
了解proto3后,接下来看官方Demo作为训练,这里建议看一遍之后自己动手搭建出来,一方面巩固之前的知识,一方面是对整个流程更加熟悉. 官方Demo地址: https://github.com/gr ...
Leaflet渲染TopoJSON数据demo
非常简单,就是做一下topoJSON数据的渲染,用的是leaflet. 代码如下: Html: <html><head><title>leaflet TopoJSO ...
c语言第六版第四章答案,C primer plus 第六版第6版 004章第四章编程练习答案中文...
第四章编程练习 1.编写一个程序,提示用户输入名和姓,然后以『名,姓』的格式打印出来. char name[40]; char family[40]; printf("请输入名和姓:\n& ...
leaflet实现四色预警（仿echarts气泡图）（leaflet篇.41）
听老人家说:多看美女会长寿地图之家总目录(订阅之前建议先查看该博客) 文章末尾处提供保证可运行完整代码包,运行如有问题,可"私信"博主. 效果如下所示: 下面献上完整代码,代码重 ...

004 Leaflet 第四个demo 使用自己的图标替换marker图标

004 Leaflet 第四个demo 使用自己的图标替换marker图标相关推荐

最新文章

热门文章