4039人阅读
笔记（59）
code（20）
前端（22）
地图和marker显示：/examples/quick-start.html
marker自定义图片：/examples/custom-icons.html
图层切换（控制）：/examples/layers-control.html（其中cities的marker数组是option，可以删去）
具体文档：/reference.html#marker
----------------------------------------------------------------------------------------------------------------------------------------------
移除Marker：
思路》》把marker放到layer中，删除layer,因为Marker实现了ILayer接口
添加时：map.addLayer(marker); //而不用marker.addTo(map);
删除时：map.removeLayer(marker);
Geojson图层：
//画导航线路
function drawGeojson(json){
if(map.hasLayer(routeline)){
map.removeLayer(routeline);
var route = [{
&type&: &LineString&,
&coordinates&: json
routeline = L.geoJson(route,{style:{&color&: &#FF7F00&, &weight&: 5,&opacity&: 0.65 }});
map.addLayer(routeline);
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：86406次
排名：千里之外
原创：65篇
转载：64篇
(10)(25)(2)(1)(2)(2)(2)(1)(3)(4)(11)(10)(4)(1)(2)(3)(3)(2)(6)(4)(2)(3)(1)(4)(3)(3)(2)(2)(3)(1)(1)(2)(4)leaflet地图应用-动态标绘polygon
时间： 22:51:49
&&&& 阅读：908
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&& leafletjs是一款优秀的开源二维地图，并提供了丰富的开发Api，下面列举一个在地图上动态标绘polygon的代码，实现起来的比较方便、简单。& 具体实现代码:&//定义地图对象&map = L.map(‘_MainMap‘, {& & & & & & & & & & maxZoom: 16& & & & & & & & });&//加载OSM的开源在线地图&L.tileLayer(‘http://{s}.tile.osm.org/{z}/{x}/{y}.png‘, {& & & & & & & & & & attribution: ‘& &a href="http://osm.org/copyright"&OpenStreetMap&/a& contributors‘& & & & & & & & }).addTo(map);&//点击按钮开始进行标绘：&$(document).ready(function () {& & & & & & $("#_createBtn").click(function (e) {& & & & & & & &//注册地图的左键点击事件和双击事件& & & & & & & & map.on(‘click‘, MapLeftClick);& & & & & & & & map.on("dblclick", MapDoubleClick);& & & & & & & &//创建一个空的polygon，设置简单属性& & & & & & & & _polygon = L.polygon(_pointArr, {& & & & & & & & & & color: ‘red‘,& & & & & & & & & & fillColor: ‘#f03‘,& & & & & & & & & & fillOpacity: 0.5& & & & & & & & });& & & & & & & & //将polygon加载到地图上& & & & & & & & _polygon.addTo(map);& & & & & & });& & & & });& & & & var _polygon =& & & & var _pointArr = new Array();& & & &//双击事件结束标绘polygon& & & & function MapDoubleClick(e)& & & & {& & & & & & map.off(‘click‘, MapLeftClick);& & & & & & map.off("dblclick", MapDoubleClick);& & & & & & && & & & }& & & &//左键点击事件修改polygon的点& & & & function MapLeftClick(e) {& & & &//在地图上标注每个点的位置& & & & & & L.circleMarker(e.latlng, {& & & & & & & & radius: 2,& & & & & & & & color: ‘red‘& & & & & & }).addTo(map);& & & &//给polygon上增加点& & & & & & _polygon.addLatLng(e.latlng);& & & & }& & &代码比较简单，当然在标绘时也可以自定义各个实现的属性。标签：&&&&&&&&&
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！leafletjs+heatmapjs绘制热力地图 - 简书
leafletjs+heatmapjs绘制热力地图
前面两篇其实都是为了写一下最后搜了一下github 加载了leaflet.js和heatmap.js，就可以用leaflet-heatmap.js来绘制热力地图了。
首先，这是要展示的数据，有max代表所有数据的最大值，lat和Ing代表经纬度的值，count是要展示的数据，后面配置会有讲到，所以max应该是count中的最大值。
// don't forget to include leaflet-heatmap.js
var testData = {
data: [{lat: 24.6408, lng:46.7728, count: 3},{lat: 50.75, lng:-1.55, count: 1}, ...]
很熟悉，就是我们讲leaflet的基础层的初始化。
var baseLayer = L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
attribution: '...',
maxZoom: 18
cfg中所有heatmapjs的参数都可以用。另外加了额外的参数，都有说明
var cfg = {
// radius should be small ONLY if scaleRadius is true (or small radius is intended)
// if scaleRadius is false it will be the constant radius used in pixels
"radius": 2,
"maxOpacity": .8,
// scales the radius based on map zoom
"scaleRadius": true,
// if set to false the heatmap uses the global maximum for colorization
// if activated: uses the data maximum within the current map boundaries
(there will always be a red spot with useLocalExtremas true)
"useLocalExtrema": true,
// which field name in your data represents the latitude - default "lat"
latField: 'lat',
// which field name in your data represents the longitude - default "lng"
lngField: 'lng',
// which field name in your data represents the data value - default "value"
valueField: 'count'
初始化 heatmapLayer ，也就是将热力图看作一层，还记得说地图的时候，是说它们是一层一层堆积的么?
var heatmapLayer = new HeatmapOverlay(cfg);
var map = new L.Map('map-canvas', {
center: new L.LatLng(25.6586, -80.3568),
layers: [baseLayer, heatmapLayer]
heatmapLayer.setData(testData);
setDate每次改变值，热力图也是会更新的。
原生态的配色被吐槽太丑，现在的大家觉得有好一点么？
作者给的图
看了一下代码，也就200来行，主要是重写了setData，addData的方法，另外跟地图衔接的有addTo和onRemove ，使之适应热力图。
主要用来记录整理前端资料，东西会一直更新，而且已经发布的文章也会一直更新leaflet的开发入门教程
作者：小虫有梦想
字体：[ ] 类型：转载 时间：
leaflet是领先的开源JavaScript库为移动设备设计的互动地图。接下来通过本文来给大家介绍下leaflet的开发入门教程，需要的朋友可以参考下
Leaflet简述
Leaflet 是一个为建设交互性好适用于移动设备地图，而开发的现代的、开源的 JavaScript 库。代码仅有 33 KB，但它具有开发在线地图的大部分功能。Leaflet设计坚持简便、高性能和可用性好的哲学思想，在所有主要桌面和移动平台能高效运作，在现代浏览器上会利用HTML5和CSS3的优势，同时也支持旧的浏览器访问。支持插件扩展，有一个友好、易于使用的API文档和一个简单的、可读的源代码。Leaflet强大的开源库插件涉及到地图应用的各个方面包括地图服务，数据提供，数据格式，地理编码，路线和路线搜索，地图控件和交互等类型的插件共有140多个。
日—1.0leaflet,最快的,最稳定和严谨的leaflet,终于出来了!
leaflet是领先的开源JavaScript库为移动设备设计的互动地图。重33 KB的JS,所有映射大多数开发人员所需要的特性。
leaflet设计简单,性能和可用性。它有效地在所有主要的桌面和移动平台,可以扩展的插件,有一个美丽的,易于使用和证据确凿的API和一个简单的、易读的源代码,是一个快乐作出贡献。
让我们开始一个小实例：准备一个空白页
这里我们创建一个地图在地图的div,添加瓷砖的选择,然后添加一个标记,在弹出一些文本:
&地图在编写任何代码之前,您需要做以下页面上制备步骤:
包括leaflet CSS文件标题部分的文档:
&link rel="stylesheet" href="/leaflet@1.0.1/dist/leaflet.css" /&
　　（没有这个文件可以去下载，也可以自己引入,以下不再累述），点击下载（稳定版本）;
包括传单JavaScript文件:
&script src="/leaflet@1.0.1/dist/leaflet.js"&&/script&
放一个div元素与特定的id,你想要你的地图:
&div id="mapid"&&/div&
（id名字可以随便设定，但是必须与下面js代码定义个一样。。）
确保定义的映射容器有一个高度,例如通过设置CSS（必须定义一个高度，因为无法获取指定的id名，因此这个库并没有进行高度的处理设置，自己必须设置高度，如同div默认是没有高度的一样）:
#mapid { height: 180 }
现在您已经准备好初始化地图,用它做一些东西。
让我们创建一个地图的中心北京某个地点漂亮Mapbox街道瓷砖。首先我们将初始化和设置它的视图映射到我们选择的地理坐标和缩放级别（里面的& mapid& 必须和设置的id保持一致）:
var mymap = L.map('mapid').setView([39.226], 14);
在默认情况下(我们没有通过任何选项创建地图实例)时,所有鼠标和触摸交互启用了在地图上,它有放大和归因控制。（这些都可以通过js来控制，目前只是入门，有深入了解的可以自己摸索）
注意setView调用返回地图对象——大多数leaflet方法这样的行为时不返回一个显式的值,它允许方便类jQuery方法控制。
接下来,我们将添加一个砖层来增加我们的地图,在这种情况下这是一个Mapbox街道砖层。创建一个砖层通常涉及瓷砖图像的模板设置URL(在Mapbox得到你),归因的文本和的最大缩放级别层:
L.tileLayer('https://api./v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data & &a href="http://openstreetmap.org"&OpenStreetMap&/a& contributors, &a href="http://creativecommons.org/licenses/by-sa/2.0/"&CC-BY-SA&/a&, Imagery & &a href=""&Mapbox&/a&',
maxZoom: 18,
id: 'your.mapbox.project.id',
accessToken: 'your.mapbox.public.access.token'
}).addTo(mymap);
确保所有的代码称为div和传单。js包含。就是这样!现在你有一个工作leaflet地图。
标记,圆圈和多边形
除了砖层,您可以轻松地向地图添加其他东西,包括标志、折线、多边形、圆和弹出窗口。让我们添加一个标记:
L.marker([39.226]).addTo(mymap)
.bindPopup("北京大厦&br&").openPopup();
添加一个圆是相同的(除了指定半径米作为第二个参数),但允许您控制看起来如何通过选择在创建对象时作为最后一个参数:
L.circle([39.625], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(mymap).bindPopup("颐和园欢迎你");
添加一个多边形很简单:
L.polygon([
[39.9591],
[39.9676],
]).addTo(mymap).bindPopup("故宫");　
弹出窗口时通常使用您想要一些信息附加到地图上的一个特定的对象。传单有非常方便的快捷方式（和上面添加的方式一样，直接添加或者，另行添加，实际是一样的& openPopup是表示默认是否打开）:
marker.bindPopup("北京大厦").openPopup();
circle.bindPopup("颐和园");
polygon.bindPopup(故宫");
　试着点击我们的对象。bindPopup方法高度与指定的HTML内容弹出你的标记弹出出现当你点击对象,和openPopup方法(标记)立即打开弹出。
&& 您还可以使用弹出窗口层(当你需要更多的东西比附加一个弹出一个对象):
var popup = L.popup()
.setLatLng([51.5, -0.09])
.setContent("I am a standalone popup.")
.openOn(mymap);
　　这里我们用openOn代替遭受因为它处理自动关闭之前打开弹出当打开一个新的良好的可用性。
每次发生在leaflet,比如用户点击地图上标记或缩放变化,相应的对象发送一个事件,你可以订阅功能。它允许您对用户交互（这里显示的是每次你点击位置的经纬度）:
function onMapClick(e) {
alert("You clicked the map at " + e.latlng);
mymap.on('click', onMapClick);
每个对象都有自己的一组事件,有关详细信息,请参阅文档。侦听器函数的第一个参数是一个事件对象,它包含有用的信息的事件发生。例如,地图点击事件对象(e在上面的示例中)latlng属性点击出现的位置。
让我们改善我们的例子中,使用一个弹出一个警告:
var popup = L.popup();
function onMapClick(e) {
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
mymap.on('click', onMapClick);
以上所述是小编给大家介绍的leaflet的开发入门教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具已解决 - 使用 leaflet.js：地图标记效果实现 · Ruby China
额... 如今有这么个需求：
网页显示一副地图，可以是嵌的外部服务也可以就是一张图片，这个无所谓；
地图上有几个标记地点；
同一网页内，地图外面有许多人的名字；
每个人名关联地图上的一个标记点，表示这个人在这个位置；
当鼠标移动到某个人名上的时候，地图上对应的这个标记地点会亮起来；
当鼠标点击地图上某个标记地点的时候，弹一个气球出来显示这个地点关联的所有人名。
请问这需求有没有现成的库，现成的解决方案？谢谢...... JavaScript 实在一窍不通 T_T
google地图 百度地图都可以做，具体自己看文档去..
这还是需要你会点js的。。。
高德地图SDK
地图api 都有基于实现，国内建议使用百度。出于用户考虑 google 地图经常性无法访问。
是不是想做类似的东西？
可以试试mapbox：
google map 的话找 marker 相关的 api 就可以了, api 里不支持的, 可以找
国内用百度地图吧，做过差不多的东西，很容易实现的
是需要这样的 Google Maps 的 Markers 吗？
可以用这个：
感谢楼上回复的各位，虽然没有用到各位提供的方案... 基本上解决了，使用的是
leafletjs 可以和 baidu 地图搭配使用不？
百度得做plugin吧. URL输出和Leaflet标准的不一样
请问楼主Leaflet的地图用什么工具制作
后方可回复, 如果你还没有账号请点击这里 。
共收到 12 条回复