Leaflet_创建地图（2017-10-20）
包含官网的1,3个示例
可以直接运行
<!DOCTYPE html>
<html> <head>
<title>leaflet</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<style TYPE="text/css">
body {
margin: 0px;
padding: 0px;
}
/**
* 单独设置mapid为100%不显示，可能float坍塌
*/ html,
body,
#mapDiv {
height: 100%;
width: 100%;
}
</style>
<script>
$(function() {
//实例化对象
var map = L.map('mapDiv');
//设置地图视图（地理中心和缩放）
map.setView([35, 104], 5); //地图地址
var url = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
var attr = ' Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'; //图层
L.tileLayer(url, {
maxZoom: 18,
attribution: attr,
id: 'mapbox.streets'
}).addTo(map); //圆心
var circle = L.circle([39.921108, 116.395562], {
color: 'red', //边框颜色
fillColor: '#f03', //填充颜色
fillOpacity: 0.2, //透明度
radius: 200000 //半径 米
}).addTo(map); //多边形
var polygon = L.polygon([
[31.844248, 117.232868],
[30.586032, 114.32653],
[28.235398, 112.956396]
]).addTo(map); //标记点
var marker = L.marker([45.761159, 126.595657]);
marker.bindPopup("<b>哈尔滨</b>");
marker.addTo(map); L.marker([39.921108, 116.395562]).addTo(map).bindPopup("<b>北京!</b><br />直辖市.");
L.marker([39.120097, 117.206074]).addTo(map).bindPopup("<b>天津市!</b><br />直辖市.");
L.marker([31.233953, 121.460992]).addTo(map).bindPopup("<b>上海市!</b><br />直辖市.");
L.marker([29.573519, 106.545211]).addTo(map).bindPopup("<b>重庆市!</b><br />直辖市."); //可拖拽的标识
var marker = L.marker([30, 118], {
draggable: true, // 使图标可拖拽
title: 'Text', // 添加一个标题
opacity: 0.5 // 设置透明度
})
.addTo(map)
.bindPopup("<b>中国</b><br>安徽黄山.")
.openPopup(); //图标
var shadowUrl = "http://leafletjs.com/examples/custom-icons/leaf-shadow.png";
var orangeUrl = "http://leafletjs.com/examples/custom-icons/leaf-orange.png";
var redUrl = "http://leafletjs.com/examples/custom-icons/leaf-red.png";
var greenUrl = "http://leafletjs.com/examples/custom-icons/leaf-green.png"; //配置图标选项
var LeafIcon = L.Icon.extend({
options: {
shadowUrl: shadowUrl, //阴影图像
iconSize: [38, 95], //图标的大小
shadowSize: [50, 64], //阴影的大小
iconAnchor: [22, 94], //点图标将对应标记的位置
shadowAnchor: [4, 62], //相同的影子
popupAnchor: [-3, -76] //点弹出打开相对于iconanchor
}
});
var orangeIcon = new LeafIcon({
iconUrl: orangeUrl //图标图像
});
var redIcon = new LeafIcon({
iconUrl: redUrl //图标图像
});
var greenIcon = new LeafIcon({
iconUrl: greenUrl //图标图像
}); L.marker([43.83326, 87.619841], {
icon: orangeIcon
}).addTo(map).bindPopup("<b>新疆维吾尔自治区</b>");
L.marker([22.373712, 114.16599], {
icon: redIcon
}).addTo(map).bindPopup("<b>香港特别行政区</b>");
L.marker([22.157174, 113.576772], {
icon: greenIcon
}).addTo(map).bindPopup("<b>澳门地区</b>"); //弹出面板
//绑定一个弹出标记点击并打开它
var popup = L.popup();
popup.setLatLng([37.888837, 112.557541]);
popup.setContent("<b>太原</b>");
popup.openOn(map);
var popup2 = L.popup().setLatLng([25.051612, 121.531195]).setContent("<b>台北市!</b><br />台北.").openOn(map); //添加点击事件
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("点击坐标： " + e.latlng.toString())
.openOn(map);
} map.on('click', onMapClick);
})
</script>
</head> <body>
<div id="mapDiv">
</div>
</body> </html>
效果：
Leaflet_创建地图（2017-10-20）的更多相关文章
- Leaflet_创建地图（官网示例,可以直接运行）(2017-10-20)
官网:http://leafletjs.com/examples.html 快速启动指南 http://leafletjs.com/examples/quick-start/example.html ...
- 在Microsoft Power BI中创建地图的10种方法
今天,我们来简单聊一聊“地图”. 在我们日常生活中,地图地位已经提升的越来越高,出门聚餐.驾驶.坐车.旅行......应运而生的就是各种Map APP. 作为数据分析师,我们今天不讲生活地图,要跟大家 ...
- java课后作业2017.10.20
动手动脑1: public class Test{ public static void main(String args[]) { Foo obj1=new Foo(); }}class Foo{ ...
- 2017.10.20 jsp用户登陆界面连接数据库
用户登陆界面 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8 ...
- 第8次Scrum会议(10/20)【欢迎来怼】
一.小组信息 队名:欢迎来怼 小组成员 队长:田继平 成员:李圆圆,葛美义,王伟东,姜珊,邵朔,冉华 小组照片 二.开会信息 时间:2017/10/20 17:20~17:45,总计25min. 地点 ...
- 2017/10 冲刺NOIP集训记录：暁の水平线に胜利を刻むのです!
前几次集训都没有记录每天的点滴……感觉缺失了很多反思的机会. 这次就从今天开始吧!不能懈怠,稳步前进! 2017/10/1 今天上午进行了集训的第一次考试…… 但是这次考试似乎是近几次我考得最渣的一次 ...
- 2017.10.10 java中的继承与多态（重载与重写的区别）
1. 类的继承 继承是面向对象编程技术的主要特征之一,也是实现软件复用的重要手段,使用继承特性子类(subclass) 可以继承父类(superclass)中private方法和属性,继承的目的是使程 ...
- （转自http://www.blogjava.net/moxie/archive/2006/10/20/76375.html）WebWork深入浅出
(转自http://www.blogjava.net/moxie/archive/2006/10/20/76375.html) WebWork深入浅出 本文发表于<开源大本营> 作者:钱安 ...
- js调用百度地图API创建地图
技术交流群:233513714 <html xmlns="http://www.w3.org/1999/xhtml"><head runat="serv ...
随机推荐
- Ubuntu Eclipse C++运行问题：launch failed.Binary not found
在Ubuntu下的Eclipse C++环境出现launch failed.Binary not found问题时,可采用如下解决方案: (1)首先检查系统中是否成功安装g++.如果console输出 ...
- Spring_使用XML文件的方式配置事务
步骤: 正常配置jdbctemplate 正常配置bean 配置事物管理器 配置事物管理器 配置aop切入点,通过切入点把事物链接起来 思路: 接着上一个买书的例子吧,直接拷到新包下,把注解都干掉,需 ...
- Android app 在线更新那点事儿（适配Android6.0、7.0、8.0）
一.前言 app在线更新是一个比较常见需求,新版本发布时,用户进入我们的app,就会弹出更新提示框,第一时间更新新版本app.在线更新分为以下几个步骤: 1, 通过接口获取线上版本号,versionC ...
- vue之导入Bootstrap以及jQuery的两种方式
Vue引入bootstrap主要有两种方法 方法一:在main.js中引入,此方法导入的bootstrap中对于html,body的一些预设置的css样式可能无效. 一.引入jQuery 在当前项目的 ...
- java lambda 的用法
一.打印数组 String[] s = "fdsfsdfds".split(""); Stream<String> str = Stream.of( ...
- liunx java环境搭建
1.安装jdk apt install openjdk--jdk-headless //可以直接输入javac会有提示
- PHP获取文件后缀名
PHP获取文件后缀名是PHP学习者常见的一种操作,无论是在面试过程中还是PHP新手自学中.PHP获取文件后缀名都是很普遍的需要掌握的一个知识点. 下面我们就给大家总结介绍PHP获取文件扩展名也就是后缀 ...
- PHP中嵌套函数被调用时出现报错的问题
对于初入门的PHP新手来说,在学习关于PHP函数嵌套的知识点时可能会有一定的难度.比如有的朋友在练习PHP函数嵌套相关问题时,会遇到调用内部函数时就会出现报错的情况等. 那么本篇文章就为大家详细得分析 ...
- ZOJ 3229 Shoot the Bullet(有源汇上下界最大流)
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=3442 题目大意: 一个屌丝给m个女神拍照,计划拍照n天,每一天屌丝给 ...
- python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)
一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...