<!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="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
  -->
  <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="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
  -->
  <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 测试加载高德地图的更多相关文章

  1. arcgis 加载高德地图 es6的方式

    目前很多arcgis 加载高德地图是dojo的方式 外部引入文件,现在改成这种方式 /** * Created by Administrator on 2018/5/14 0014. */ impor ...

  2. （转）Openlayers 2.X加载高德地图

    http://blog.csdn.net/gisshixisheng/article/details/44853881 概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍O ...

  3. OpenLayers加载高德地图离线瓦片地图

    本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer加载谷歌地球离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/openla ...

  4. Vue异步加载高德地图API

    项目中用到了高德地图的API以及UI组件库,因为是直接把引入script写在index.html中,项目打包后运行在服务器,用浏览器访问加载第一次时会非常慢,主要原因是加载高德地图相关的js(近一分钟 ...

  5. vue 里面异步加载高德地图

    前言 关于Vue 里面使用异步加载高德地图 项目中其实只有几处需要用到地图,不需要全局引入 在index文件中引入js会明显拖慢首屏加载速度,虽然可以使用异步加载script的方式解决,但是始终觉得不 ...

  6. openLayers加载高德地图

    之前用openlayers对高德,百度,腾讯,bing,supermap,天地图,arcgis,google等地图进行了对接,今天简单介绍一下openlayers+高德: 在Openlayers.La ...

  7. Arcgis api For silverlight 加载高德地图

    原文 http://www.cnblogs.com/thinkaspx/archive/2012/11/13/2767752.html 地图仅供演示,研究使用.如要商用 请联系厂商. public c ...

  8. iOS unity 互相调用加载高德地图时

    需要增加 mapView.delegate = self 这是一种设计模式,有的人称为代理,有的人称为委托,比如有A,B两个控制器,由A可以push到B,B可以pop回A,现在有一种情况,A中有一个l ...

  9. ArcGIS加载高德、OSM和谷歌等地图

    1. 引言 网络地图对于我们来说已经不是什么新鲜事了,上面有各大互联网公司收集的海量的地理空间数据.一般网络地图的地图是以切片形式存在的,因此,本文重点讲述如何将这些网络切片地图加载并显示再ArcGI ...

随机推荐

  1. Android：weight，margin，padding详解实例

    weight详解 weight是用来等比例划分区域的属性. 案例代码 <LinearLayout xmlns:android="http://schemas.android.com/a ...

  2. 详解 leetcode 猜数字大小 II

    375. 猜数字大小 II 原题链接375. 猜数字大小 II 题目下方给出了几个提示: 游戏的最佳策略是减少最大损失,这引出了 Minimax 算法,见这里,和这里 使用较小的数开始(例如3),看看 ...

  3. MySql数据保障

    1, 安装文档 配置文件,目录,参数,用户,权限,程序,安装方式 2, 数据备份 强大的备份策略,

  4. ASP.NET Core中自定义路由约束

    路由约束 ASP.NET Core中,通过定义路由模板,可以在Url上传递变量,同时可以针对变量提供默认值.可选和约束. 约束的使用方法是在属性路由上添加指定的约束名,用法如下: // 单个使用 [R ...

  5. 往github提交代码流程

    一 首先在Github新建一个仓库,回到首页,点击右上角的New repository新建仓库. 二  在本地依次使用下面命令 …or create a new repository on the c ...

  6. Testing - 软件测试知识梳理 - 相关词汇

    测试策略 描述测试工程的总体方法和目标:根据测试需求,描述在什么测试阶,依据什么测试要素和目标,进行什么种类的测试,使用什么样的测试方法和工具. 测试策略的制定主要包含如下内容: 确定测试过程要使用的 ...

  7. postgresql-分页重复数据探索

    # postgresql-分页重复数据探索 ## 问题背景 许多开发和测试人员都可能遇到过列表的数据翻下一页的时候显示了上一页的数据,也就是翻页会有重复的数据. ### 如何处理? 这个问题出现的原因 ...

  8. [每天解决一问题系列 - 0005] WiX Burn 如何校验chained package的合法性

    问题描述: 项目中使用Wix burn打包,内部包含了多个MSI.有时候会遇到如下错误 Error 0x80091007: Failed to verify hash of payload: Setu ...

  9. Python获取网页指定内容(BeautifulSoup工具的使用方法)

    Python用做数据处理还是相当不错的,如果你想要做爬虫,Python是很好的选择,它有很多已经写好的类包,只要调用,即可完成很多复杂的功能,此文中所有的功能都是基于BeautifulSoup这个包. ...

  10. 关于ASP.Net Core Web及API身份认证的解决方案

    6月15日,在端午节前的最后一个工作日,想起有段日子没有写过文章了,倒有些荒疏了.今借夏日蒸蒸之气,偷得浮生半日悠闲.闲话就说到这里吧,提前祝大家端午愉快(屈原听了该不高兴了:))!.NetCore自 ...