<!DOCTYPE HTML>
<html>
<head>
<#include "head-file.htm">
<link rel="stylesheet" href="{ms:global.host/}/{ms:global.style/}/js/leaflet/leaflet.css" />
<script src="{ms:global.host/}/{ms:global.style/}/js/leaflet/leaflet.js"></script>
<style type="text/css">
#mapDiv {
width:100%;
height: 480px;
}
</style>
</head>
<body>
<#include "head.htm">
<div class="met-column-nav ">
<div class="container">
<div class="card">
<div class="sidebar-tile">
<ul class="met-column-nav-ul invisible-xs">
<li>
<a href="#" title="城管地图" class="link active">城管地图</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<section class="met-show animsition">
<div class="container">
<div class="col-md-3">
<div class="row">
<div class="met-news-bar nomargin">
<div class="recommend news-list-md">
<h3>城管地图</h3>
<ul class="list-group list-group-bordered">
<!-- 定义name变量 -->
<li class="list-group-item">
<!-- if标签中直接使用name -->
<span id="parkLot" class="news-list-span">停车场</span>
</li>
<li class="list-group-item">
<!-- if标签中直接使用name -->
<span id="busStation" class="news-list-span">公交站点</span>
</li>
<li class="list-group-item">
<!-- if标签中直接使用name -->
<span id="bicycle" class="news-list-span">公共自行车租赁点</span>
</li>
<li class="list-group-item">
<!-- if标签中直接使用name -->
<span id="toilet" class="news-list-span">公厕</span>
</li>
<li class="list-group-item">
<!-- if标签中直接使用name -->
<span id="park" class="news-list-span">公园</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-9 met-news-body">
<div id="mapDiv"></div>
</div>
</div>
</section>
<#include "footer.htm">
<script>
var mapUrl = 'https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8';
var labelUrl = 'https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=216ee92889e17ab1b083fae665d522b8'
//初始化 地图
var leafletMap = L.map('mapDiv').setView([27.75962, 116.06021], 13);
//将图层加载到地图上，并设置最大的聚焦还有map样式
// 天地图底图
L.tileLayer(mapUrl, {
maxZoom: 18,
minZoom:13,
id: 'map'
}).addTo(leafletMap);
// 天地图标注
L.tileLayer(labelUrl, {
maxZoom: 18,
minZoom:13,
id: 'label'
}).addTo(leafletMap);
//增加一个marker ，地图上的标记，并绑定了一个popup，默认打开
L.marker([27.75962, 116.06021]).addTo(leafletMap)
.bindPopup("<b>公厕</b><br />位置：市中心");
//为点击地图的事件 增加popup
var popup = L.popup();
// function onMapClick(e) {
// popup
// .setLatLng(e.latlng)
// .setContent("You clicked the map at " + e.latlng.toString())
// .openOn(leafletMap);
// }
// leafletMap.on('click', onMapClick);
</script>
</body>
</html>
