前端学习－使用JS库Leaflet.js生成世界地图并获取标注地址经纬度。

介绍：Leaflet是一个开源的JavaScript库，对移动端友好且对地图有很好的交互性。大小仅仅只有 33 KB，同时具有大多数地图所需要的特点。

Leaflet设计的非常简单易懂, 同时具有很好的性能和易用性。它在桌面端和移动端都工作的相当高效，并有大量的插件用于扩张Leaflet的功能。
微信公众号：673399718嘻嘻
demo图如下：

使用leaflet.js生成世界地图非常方便，配置参数记录下，有兴趣的可以看看本例中引入jquery操作dom。
首先：在页面的头部引入css文件cdn地址：
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css" />
在body前引入js文件cdn地址：
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script>
将id为mapid的div标签放到地图显示的地方：

<div id="mapid"></div>
确保地图容器有定义好的高度，例如在css文件中添加如下代码：
＃mapid{ height: 180px; }
创建一个中心点在伦敦，使用Mapbox街道瓦片的地图。首先初始化地图，并且设置地图在视窗的中心点和缩放级别：

locate({setView: true, maxZoom: 16})
这里我设置最大的缩放级别为16，并设置地图根据位置自动调整窗口。当用户同意浏览器分享用户位置后，地图将自动调整视窗中心为该位置。

leaflet.js中有两个接口locationerror是获取本地地址失败后调用的回调函数，而locationfound是获取获取本地地址成功后的回调。
确保所有的代码都在创建div标签和引用leaflet.js之前。这样应该没有什么问题了，你现在应用有一个可以使用的Leaflet地图了。

参数介绍：
marker可拖动要设置{draggable:true}参数
获取mark的经纬度信息:marker.getLatLng();
代码里我用了一个数组来存放拖动图标返回的地址经纬度，获取时只需要最后一个确定的位置，即数组最后一个元素：position[position.length-1].lat
弹出框的使用：给地图绑定点击事件，事件发生时，bindPopup方法会把HTML内容和弹出框绑定到一起。当你点击这个对象之后，bindPopup将马上打开一个弹出框。
function onMapClick(e) {
var popup = L.popup();
popup
.setLatLng(e.latlng)
.setContent("你点击的位置在 " + e.latlng.toString())
.openOn(mymap);
}

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css" />
    <style>
        #mapid {
            float: left;
            height: 500px;
            width: 800px;
            margin-left: 60px;
        }
        #right{
            height: 500px;
            width: 500px;
            float: right;
            background: rgb(92, 184, 92);
        }
    </style>
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">新建仓库</h3>
    </div>
    <div class="panel-body">
        <div class="container">
            <div class="form-group">
                <label  class="col-sm-1 control-label">仓库名称</label>
                <div class="col-sm-11">
                    <input type="text" class="form-control" id=name" placeholder="输入您的仓库名">
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-1 control-label">仓库地址</label>
                <div class="col-sm-11">
                    <input type="text" class="form-control" id="addr">
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-1 control-label">地址经度</label>
                <div class="col-sm-11">
                    <input type="text" class="form-control" id="lat" >
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-1 control-label">地址纬度</label>
                <div class="col-sm-11">
                    <input type="text" class="form-control" id="lon" >
                </div>
            </div>
            <div class="col-md-6" style="margin-top: 20px">
                <button id="referred" class="btn btn-success">确定</button>
                <a id="back" class="btn btn-success">返回</a>
                <span>请在地图中选择您仓库的地理位置，以便存储仓库信息。</span>
            </div>

        </div>
        <div id="mapid"></div>
        <div id="right"></div>
    </div>
</div>
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script>
<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script>

    var mymap = L.map('mapid');
    mymap.locate({setView: true, maxZoom: 16});
    var position = [];
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
        maxZoom: 18,
        id: 'mapbox.streets'
    }).addTo(mymap);

    function onLocationFound(e) {
        L.marker(e.latlng,{draggable: true})
                .addTo(mymap)
                .bindPopup("请选择仓库位置!").openPopup()
                .on('dragend', function (event) {
                    var marker = event.target;
                    var latlng = marker.getLatLng();
                    position.push(latlng);
                });

    }

    function onLocationError() {
        L.marker([51.5, -0.09],{draggable: true})
                .addTo(mymap)
                .bindPopup("<b>请选择仓库位置!</b>").openPopup()
                .on('dragend', function (event) {
                    var marker = event.target;
                    var latlng = marker.getLatLng();
                    position.push(latlng);
                });
    }

    mymap.on('locationerror', onLocationError);
    mymap.on('locationfound', onLocationFound);

    function onMapClick(e) {
        var popup = L.popup();
                popup
                .setLatLng(e.latlng)
                .setContent("你点击的位置在 " + e.latlng.toString())
                .openOn(mymap);
    }

    mymap.on('click', onMapClick);

    $('#referred').click(function () {
        var name = $('#name').val();
        var address = $('#addr').val();
        if(name==''||address==''||position[position.length-1]==undefined){
            $('#referred').prop('disabled',false);
            $.toast({
                position: 'top-right',
                text:'请补全仓库信息！',
                icon:'error'
            })
        }
        else {
            var lat =  position[position.length-1].lat;
            var lng =  position[position.length-1].lng;
            $('#lat').val(lat);
            $('#lon').val(lng);
            $('#right').text(position)
        }

    });
    //返回仓库
    $('#back').click(function () {
        $(this).attr('href','warehouse.html');
    })
</script>
</body>
</html>

前端学习－使用JS库Leaflet.js生成世界地图并获取标注地址经纬度。的更多相关文章

一统江湖的大前端(1)——PPT制作库impress.js
<一统江湖的大前端>系列是自己的学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有点O ...
轻量级的绘制图表js库--Morris.js
Morris.js 是一个轻量级的 JS 库,使用 jQuery 和 Raphaël 来生成各种时序图. 虽说现在移动手机网络已经到了4G,但是在移动web客户端开发过中,为了达到良好的体验效果,需要 ...
如何写JS库，JS库写法
前言: 现在javascript库特别多,其写法各式各样,总结几种我们经常见到的,作为自己知识的积累.而目前版本的 JavaScript 并未提供一种原生的.语言级别的模块化组织模式,而是将模块化的方 ...
移动开发js库Zepto.js使用中的一些注意点
来自http://chaoskeh.com/blog/some-experience-of-using-zepto.html的参考. 前段时间完成了公司一个产品的 HTML5 触屏版,开发中使用了 Z ...
移动开发js库Zepto.js应用详解
从哪里下载 Zepto 地址:http://zeptojs.com/ 中文版地址:http://www.css88.com/doc/zeptojs_api/ 这个问题看起来很蠢,从官网下载不就行了嘛! ...
创建自己的共用js库
直至昨晚为止,学习了一个多月的MVC与jQuery,从所做的练习中,发觉jQuery的代码也有跟C#语言一样可以重构,多页面有相同使用的方法函数,均可以放置于一个单独立的js文件或是自定义的js库中. ...
数字格式化的 js 库
数字格式化的 js 库 Numeral.js,是一个用于格式化数字和处理数字的 js 库. Tip:目前 Star 有 9.2k,5年以前就没有在更新.其文档写得不很清晰,比如它提供了多语言,但如何切 ...
WEB前端学习代码片段记录
1.JS设计模式片段 Function.prototype.addMethod = function (name,fn) { this.prototype[name] = fn; return thi ...
js——移动端js事件、zepto.js
1. touchstart : 手指放到屏幕上时触发 2. touchmove : 手指在屏幕上滑动时触发 3. touched : 手指离开屏幕时触发 4. touchcancel : 系统取消to ...

随机推荐

如何在版本控制工具中管理Sencha Architect的項目
根據數次痛苦的經歷結合stack overflow上的解答,發現原來還是可以使用svn.git之類的版本控制工具管理Sencha Architect生成的項目的. 具體的要點如下,假定項目記作{PRO ...
C# WPF 从网络加载图片到byte[]数组中 Stream转byte[]代码
折腾一中午因为NetworkStream不支持Length属性 private byte[] GetImageFromResponse(WebResponse response) { using ( ...
C语言-06复杂数据类型-02字符串
#include <stdio.h> int main() { //char name[] = {'i', 't', 'c', 'H', 's', 't', '\0'}; char nam ...
《C和指针》章节后编程练习解答参考——第10章
10.1 #include <stdio.h> typedef struct { unsigned ]; unsigned ]; unsigned ]; }TelphoneNumber; ...
C++ 11 笔记（五）： std::thread
这真是一个巨大的话题.我猜记录完善绝B需要一本书的容量. 所以..我只是略有了解,等以后用的深入了再慢慢补充吧. C++写多线程真是一个痛苦的事情,当初用过C语言的CreateThread,见过boo ...
POJ 2886 Who Gets the Most Candies? 线段树
题目: http://poj.org/problem?id=2886 左右转的果断晕,题目不难,关键是准确的转啊转.因为题目要求输出约数个数最多的数,所以预处理[1,500000]的约数的个数就行了. ...
Uva 1354 Mobile Computing
题目链接题意: 在一个宽为r 的房间里, 有s个砝码, 每个天平的一端要么挂砝码, 要么挂另一个天平, 并且每个天平要保持平衡. 求使得所有砝码都放在天平上, 且总宽度不超过房间宽度的最大值. 思路 ...
Mozilla公布WebVR API标准草案
随着信息技术的迅速发展,虚拟现实(Virtual Reality,VR)技术在近些年不断完善,其应用范围也变得十分广泛.为了搭建逼真的虚拟场景,VR技术一般都需要用到大量精美的图像和复杂的动作.因此, ...
在VS2008中配置WDK7600驱动开发环境
网上这类资料多如牛毛,也许很多人都是转来转去,却很有人去真正的测试,有时候感觉确实对他人也是一种误导. 这里是我自己在VS2008 + WDK7600.16385.0 + DDKWizard配置自己的 ...
ASP.NET MVC 增强Convert用法+【分页2】
[分页2] public dynamic PageQuery() { : : ; i < data.Length; i++) ...

前端学习－使用JS库Leaflet.js生成世界地图并获取标注地址经纬度。

前端学习－使用JS库Leaflet.js生成世界地图并获取标注地址经纬度。的更多相关文章

随机推荐

热门专题