simple-map.blade.php
3.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<link rel="stylesheet" href="/assets/admin/css/map.css?t=1">
<style type="text/css">
/*html{height:100%}
body{height:100%;margin:0px;padding:0px}*/
#map-container{
height: 91vh;
width: 100%;
/*position: absolute;*/
z-index: 0;
}
.latlng {
position: absolute;
left: 10px;
bottom: 0;
padding: 10px 15px;
font-size: 14px;
background-color: rgba(0,0,0,0.3);
color: #fff;
}
</style>
<div id="map-container"></div>
<div id="latlng" class="latlng">120.646732,30.979945</div>
<script type="text/javascript">window.HOST_TYPE='2'</script>
<script type="text/javascript" charset="utf-8" src="/vendor/laravel-admin/AdminLTE/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://api.map.baidu.com/getscript?v=3.0&ak=LGdpYFUyP7FCRIyLAxKLgc9GZBR1Zqw0&services=1&s=1&t=20190624113145"></script>
<script type="text/javascript" charset="utf-8" src="/assets/admin/js/module/mapgrid.js?t=1231xxx"></script>
<script type="text/javascript" charset="utf-8" src="/assets/layui/layui.js"></script>
<script>
// 初始化数据
$(function () {
// 初始化地图
initMap();
});
/**
* 初始化地图
*/
function initMap()
{
map = new BMap.Map("map-container", { mapType: BMAP_SATELLITE_MAP, enableMapClick: false });
// map = new BMap.Map("map-container", { mapType: BMAP_HYBRID_MAP, enableMapClick: false });
//var point = new BMap.Point(120.626599, 30.989752);
// var point = new BMap.Point(120.649539, 30.980545);
var point = new BMap.Point();
map.centerAndZoom(point, 16); //设置中心点
map.enableScrollWheelZoom(); //启用缩放
map.disableDoubleClickZoom(); //禁用双击放大
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
// var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
// map.addControl(scaleCtrl);
// var zoomCtrl = new BMapGL.ZoomControl(); // 添加比例尺控件
// map.addControl(zoomCtrl);
//单击获取点击的经纬度
map.addEventListener("click", function (e) {
$("#latlng").html(e.point.lng.toFixed(6) + "," + e.point.lat.toFixed(6));
});
// 边界
setTimeout(function(){
// getBoundary();
}, 2000);
// 监听地图缩放事件
map.addEventListener("zoomend", function (e) {
var zoomNum = map.getZoom();
});
}
/**
* 获取行政区划边界
*/
function getBoundary(){
var bdary = new BMap.Boundary();
bdary.get("吴江", function(rs){ //获取行政区域
map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
// alert('未能获取当前输入行政区域');
return ;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
map.setViewport(pointArray); //调整视野
// addlabel();
});
}
</script>