Leaflet 测试加载高德地图

<!DOCTYPE html>

<html>

<head>
<title>Leaflet Quick Start Guide Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="lib/leaflet/dist/leaflet.css" />
<style>
   html { height: auto; }
   body { height: auto; margin: 0; padding: 0; font-family: Georgia, serif; font-size: 0.9em; }
   #mapid { height: auto; position: absolute; bottom: 0; left: 0; right: 0; top: 0; }

</style>

</head>

<body>
<div id="mapid"></div>

<script src="lib/leaflet/dist/leaflet-src.js"></script>
<script>
   var mymap = L.map('mapid', {crs:L.CRS.EPSG3857, minZoom:2, center: [-34.27147, -77],zoom: 13});
   //var mymap = L.map('mapid', {crs:L.CRS.EPSG3857, center: {lon:12078164.751070183, lat:4029307.9280503336},zoom: 13});

         //L.map('mapid',{trackResize:true}).setView([108.0, 34], 13);
   //Map: "http://t{s}.tianditu.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}",     http://192.168.56.1:8080/map/{z}/{y}/{x}.png
         //Annotion: "http://t{s}.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}",      http://192.168.56.1:8080/label/{z}/{y}/{x}.png
   // http://wprd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}&scl=1&ltype=3
   // http://wprd02.is.autonavi.com/appmaptile?lang=en&size=1&style=7&x={x}&y={y}&z={z}&scl=1&ltype=3
   // http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}
   // ltype=16 12
   L.tileLayer('http://localhost:7777/v2/tiles/{z}/{x}/{y}.png', {
    maxZoom: 20,
    attribution: '',
    id: 'gaodemap'
   }).addTo(mymap);


   //L.marker([34.27147, 108.94249]).addTo(mymap).bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

   L.marker([34.261, 108.94235]).addTo(mymap); // 西安
   L.marker([39.90609, 116.38543]).addTo(mymap);   //北京
   L.marker([29.55546, 106.5448]).addTo(mymap);    // 重庆
   L.marker([30.56781, 114.30222]).addTo(mymap);   //湖北
   L.marker([18.23522, 109.51085]).addTo(mymap);   //海南
   L.marker([50.24529, 127.50091]).addTo(mymap);   //黑海
   L.marker([47.84907, 88.13144]).addTo(mymap);   //阿勒泰
   L.marker([39.46739, 75.99394]).addTo(mymap);   //喀什
   L.marker([29.65541, 91.12732]).addTo(mymap);   //拉萨
   L.marker([36.63685, 101.74367]).addTo(mymap);   //西宁
   L.marker([43.89736, 125.30672]).addTo(mymap);   //长春
   L.marker([25.05091, 102.71344]).addTo(mymap);   //昆明
   L.marker([23.13177, 113.26015]).addTo(mymap);   //广州
   L.marker([36.66124, 116.9878]).addTo(mymap);   //济南
   L.marker([31.31974, 121.62005]).addTo(mymap);   //上海


   //
   var popup = L.popup();
   function onMapClick(e) {
    popup
     .setLatLng(e.latlng)
     .setContent("You clicked the map at " + e.latlng.toString())
     .openOn(mymap);
   }
   mymap.on('click', onMapClick);
</script>

</body>

</html>

Leaflet 测试加载高德地图的更多相关文章

arcgis 加载高德地图 es6的方式
目前很多arcgis 加载高德地图是dojo的方式外部引入文件,现在改成这种方式 /** * Created by Administrator on 2018/5/14 0014. */ impor ...
（转）Openlayers 2.X加载高德地图
http://blog.csdn.net/gisshixisheng/article/details/44853881 概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍O ...
OpenLayers加载高德地图离线瓦片地图
本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer加载谷歌地球离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/openla ...
Vue异步加载高德地图API
项目中用到了高德地图的API以及UI组件库,因为是直接把引入script写在index.html中,项目打包后运行在服务器,用浏览器访问加载第一次时会非常慢,主要原因是加载高德地图相关的js(近一分钟 ...
vue 里面异步加载高德地图
前言关于Vue 里面使用异步加载高德地图项目中其实只有几处需要用到地图,不需要全局引入在index文件中引入js会明显拖慢首屏加载速度,虽然可以使用异步加载script的方式解决,但是始终觉得不 ...
openLayers加载高德地图
之前用openlayers对高德,百度,腾讯,bing,supermap,天地图,arcgis,google等地图进行了对接,今天简单介绍一下openlayers+高德: 在Openlayers.La ...
Arcgis api For silverlight 加载高德地图
原文 http://www.cnblogs.com/thinkaspx/archive/2012/11/13/2767752.html 地图仅供演示,研究使用.如要商用请联系厂商. public c ...
iOS unity 互相调用加载高德地图时
需要增加 mapView.delegate = self 这是一种设计模式,有的人称为代理,有的人称为委托,比如有A,B两个控制器,由A可以push到B,B可以pop回A,现在有一种情况,A中有一个l ...
ArcGIS加载高德、OSM和谷歌等地图
1. 引言网络地图对于我们来说已经不是什么新鲜事了,上面有各大互联网公司收集的海量的地理空间数据.一般网络地图的地图是以切片形式存在的,因此,本文重点讲述如何将这些网络切片地图加载并显示再ArcGI ...

随机推荐

使用js做LeetCode
概述无意中得知了LeetCode这个刷题网站, 深得我意. 其实作为一个程序员, 我是很看重写基础代码的, 因为这个写熟了, 以后学各种语言就不会太困难. 所以我觉得有必要把这件事记下来, 供以后开 ...
C# 串口类SerialPort的使用方法
序言:最近做了一个智能体育项目——跆拳道积分系统,硬件部分会向软件传入振动值等数据,链接方式为串口,所以用到SerialPort类. 值得注意的是: DataReceived 方法,当串口缓冲区有数据 ...
关于vue中钩子函数非常好的博客
http://www.cnblogs.com/caimuqing/p/6728568.html
剖析QMenu & Qt完全定制化菜单
贴张效果图: 定制包括: 1. 周边阴影 2. 菜单项的元素(分割符, 控制ICON大小, 文字显示位置与颜色, 子菜单指示符) 菜单内的效果, 部分可以使用stylesheet实现, 但要做到这样 ...
antd tree组件文件名换行 + 点击展开时，自动收起同级其他展开目录
1.在项目中用 antd的tree组件的时候,遇到两个问题 1.文件名太长的话会超出容器很难看,解决方法如下 ` 引入css在global下设置 :global { .ant-tree li .a ...
协程及Python中的协程
1 协程 1.1协程的概念协程,又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程.(其实并没有说明白~) 我觉得单说协程,比较抽象,如果对线程有一定了解 ...
checkbox在vue中的用法总结
前言关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...
netty源码解解析(4.0)-1 核心架构
netty是java开源社区的一个优秀的网络框架.使用netty,我们可以迅速地开发出稳定,高性能,安全的,扩展性良好的服务器应用程序.netty封装简化了在服务器开发领域的一些有挑战性的问题:jdk ...
【NET CORE微服务一条龙应用】第一章网关使用与配置
简介微服务的系统应用中,网关系统使用的是ocelot,ocelot目前已经比较成熟了 ocelot就不做介绍了,等整体介绍完后再进行各类扩展介绍,ocelot源码地址:https://github. ...
[JZOJ5970] Space
Description 在一个四维空间中,给 \(4\) 个 \(n\) 的排列 \(A,B,C,D\),对于点 \((x,y,z,w)\) ,到点 \((A_x,B_y,C_z,D_w)\) 的花费 ...

Leaflet 测试加载高德地图

Leaflet 测试加载高德地图的更多相关文章

随机推荐

热门专题