Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
129f6fb0 by 任超
Options

feat:百度地图

1 parent 5c4e0c5b
Inline Side-by-side
Showing 2 changed files with 103 additions and 130 deletions
1 $('.area_list li').click(function () { 1 $(function () {
2 $(".area_list li").removeClass("active1")
3 $(this).addClass("active1");
4 2
5 }) 3 var province = undefined
4 var city = undefined
6 5
7 $(".single_input").on("click", function () { 6 $('.area_list li').click(function () {
8 var par_label = $(this).parent(); 7 $(".area_list li").removeClass("active1")
9 if (this.checked) { 8 $(this).addClass("active1");
10 $(".input_label").removeClass("choose_radioed").addClass("choose_radio");
11 par_label.removeClass("choose_radio").addClass("choose_radioed");
12 } else {
13 }
14 });
15 9
16 layui.use('element', function () { 10 })
17 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
18 //监听导航点击
19 element.on('nav(demo)', function (elem) {
20 //console.log(elem)
21 layer.msg(elem.text());
22 });
23 });
24 //config的设置是全局的
25 layui.config({
26 base: './js/'
27 }).extend({ //设定模块别名
28 common: 'common'
29 });
30
31 layui.use(['form', 'common'], function () {
32 var common = layui.common,
33 form = layui.form;
34 //三级地址联动
35 common.showCity('province', 'city');
36 11
37 //区域选择 12 $(".single_input").on("click", function () {
38 form.on('select(selectCity)', function (data) { 13 var par_label = $(this).parent();
39 console.log(data) 14 if (this.checked) {
40 return false; 15 $(".input_label").removeClass("choose_radioed").addClass("choose_radio");
41 }); 16 par_label.removeClass("choose_radio").addClass("choose_radioed");
42 //办事大厅
43 form.on('select(officehall)', function (data) {
44 let latitude = undefined
45 let longitude = undefined
46 let title = ''
47 if (data.value == 1) {
48 latitude = 116.397469
49 longitude = 39.908821
50 title = '北京'
51 } else if (data.value == 2) {
52 latitude = 121.491119
53 longitude = 31.235172
54 title = '上海'
55 } else { 17 } else {
56 latitude = 120.21201
57 longitude = 30.2084
58 title = '杭州'
59 } 18 }
60
61 var point = new BMapGL.Point(latitude, longitude);
62 var infoWindow = new BMapGL.InfoWindow(title, opts);
63 map.openInfoWindow(infoWindow, point);
64 return false;
65 }); 19 });
66 20
67 }); 21 layui.use('element', function () {
22 let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
23 //监听导航点击
24 element.on('nav(demo)', function (elem) {
25 //console.log(elem)
26 layer.msg(elem.text());
27 });
28 });
29 //config的设置是全局的
30 layui.config({
31 base: './js/'
32 }).extend({ //设定模块别名
33 common: 'common'
34 });
68 35
69 var geolocation = new BMap.Geolocation(); 36 layui.use(['form', 'common'], function () {
70 var gc = new BMap.Geocoder(); 37 var common = layui.common,
71 geolocation.getCurrentPosition(function (r) { 38 form = layui.form;
72 if (this.getStatus() == BMAP_STATUS_SUCCESS) { 39 //三级地址联动
73 var pt = r.point; 40 common.showCity('province', 'city');
74 gc.getLocation(pt, function (rs) { 41 //区域选择
75 var addComp = rs.addressComponents; 42 form.on('select(selectCity)', function (data) {
76 var province = addComp.province; 43 return false;
77 var city = addComp.city; 44 });
78 $('.Pselected').attr('data-area', province) 45 });
79 $('.Cselected').attr('data-area', city) 46 var map = new BMap.Map('container');
80 layui.use(['form', 'common'], function () { 47 var point = new BMap.Point(108.95346, 34.265725);
81 var common = layui.common, 48 map.centerAndZoom(point, 14);
82 form = layui.form; 49 var geolocation = new BMap.Geolocation();
83 //三级地址联动 50 var gc = new BMap.Geocoder();
84 common.showCity('province', 'city'); 51 geolocation.getCurrentPosition(function (r) {
52 if (this.getStatus() == BMAP_STATUS_SUCCESS) {
53 var pt = r.point;
54 gc.getLocation(pt, function (rs) {
55 var addComp = rs.addressComponents;
56 province = addComp.province;
57 city = addComp.city;
58 var cityName = province;
59 map.centerAndZoom(cityName, 14); // 初始化地图,设置中心点坐标和地图级别。 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
60 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
61 map.enableScrollWheelZoom();
62 map.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_LARGE, anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMap.Size(40, 250) }));
63 var bdary = new BMap.Boundary();
64 bdary.get(cityName, function (rs) { //获取行政区域
65 var EN_JW = "180, 90;"; //东北角
66 var NW_JW = "-180, 90;"; //西北角
67 var WS_JW = "-180, -90;"; //西南角
68 var SE_JW = "180, -90;"; //东南角
69 //4.添加环形遮罩层
70 var ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, { strokeColor: "none", fillColor: "rgb(246,246,246)", fillOpacity: 1, strokeOpacity: 0.5 }); //建立多边形覆盖物
71 map.addOverlay(ply1);
72 //5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
73 var ply = new BMap.Polygon(rs.boundaries[0], { strokeWeight: 2, strokeColor: "#0091FF", fillColor: "" });
74 map.addOverlay(ply);
75 //map.setViewport(ply.getPath()); //调整视野
76 });
77 $('.Pselected').attr('data-area', province)
78 $('.Cselected').attr('data-area', city)
79 layui.use(['form', 'common'], function () {
80 var common = layui.common,
81 form = layui.form;
82 //三级地址联动
83 common.showCity('province', 'city');
84 })
85 }) 85 })
86 }) 86 }
87 } 87 else {
88 else { 88 alert("定位失败");
89 alert("定位失败"); 89 }
90 } 90 }, { enableHighAccuracy: true });
91 }, { enableHighAccuracy: true });
92
93
94 var map = new BMap.Map('container');
95 var point = new BMap.Point(108.95309828, 34.2777999);
96 map.centerAndZoom(point, 20);
97
98
99 var cityName = '陕西省';
100 map.centerAndZoom(cityName, 15); // 初始化地图,设置中心点坐标和地图级别。 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
101 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
102 map.enableScrollWheelZoom();
103 map.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_LARGE, anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMap.Size(40, 250) }));
104 var bdary = new BMap.Boundary();
105 bdary.get(cityName, function (rs) { //获取行政区域
106 var EN_JW = "180, 90;"; //东北角
107 var NW_JW = "-180, 90;"; //西北角
108 var WS_JW = "-180, -90;"; //西南角
109 var SE_JW = "180, -90;"; //东南角
110 //4.添加环形遮罩层
111 var ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, { strokeColor: "none", fillColor: "rgb(246,246,246)", fillOpacity: 1, strokeOpacity: 0.5 }); //建立多边形覆盖物
112 91
113 map.addOverlay(ply1); 92 // 办事大厅标记
114 //5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层 93 var marker = new BMap.Marker(new BMap.Point(108.95346, 34.265725));
115 var ply = new BMap.Polygon(rs.boundaries[0], { strokeWeight: 2, strokeColor: "#00f", fillColor: "" }); 94 var marker1 = new BMap.Marker(new BMap.Point(108.953381,34.256923));
116 map.addOverlay(ply); 95 // 在地图上添加点标记
117 //map.setViewport(ply.getPath()); //调整视野 96 map.addOverlay(marker);
118 }); 97 map.addOverlay(marker1);
98 // 创建信息窗口
99 var opts = {
100 width: 200,
101 height: 100,
102 title: '办事大厅'
103 };
104 var infoWindow = new BMap.InfoWindow('西安市大唐不夜城', opts);
105 var infoWindow1 = new BMap.InfoWindow('南门', opts);
106 // 点标记添加点击事件
107 marker.addEventListener('click', function () {
108 map.openInfoWindow(infoWindow, point); // 开启信息窗口
109 });
110 marker1.addEventListener('click', function () {
111 map.openInfoWindow(infoWindow1, point); // 开启信息窗口
112 });
119 113
120 var opts = {
121 width: 100,
122 height: 60,
123 title: '办事大厅'
124 };
125 var infoWindow = new BMap.InfoWindow('雁塔区南二环西段', opts);
126 map.openInfoWindow(infoWindow, point);
127 map.centerAndZoom(new BMap.Point(108.95309828, 34.2777999), 15); // 初始化地图,设置中心点坐标和地图级别
128 map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
...\ No newline at end of file ...\ No newline at end of file
114 })
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
13 <link rel='icon' href='favicon.ico' type='image/x-ico' /> 13 <link rel='icon' href='favicon.ico' type='image/x-ico' />
14 <meta name="description" content="" /> 14 <meta name="description" content="" />
15 <meta name="keywords" content="" /> 15 <meta name="keywords" content="" />
16 <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=0NWXXsCSawnWID4UYI7Uhrl9WgtI2IGs"></script> 16 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0NWXXsCSawnWID4UYI7Uhrl9WgtI2IGs"></script>
17 <link rel="stylesheet" type="text/css" href="../../staticLib/layui/css/layui.css" /> 17 <link rel="stylesheet" type="text/css" href="../../staticLib/layui/css/layui.css" />
18 <link rel="stylesheet" type="text/css" href="../../staticCss/common.css" /> 18 <link rel="stylesheet" type="text/css" href="../../staticCss/common.css" />
19 <link rel="stylesheet" type="text/css" href="./css/index.css"> 19 <link rel="stylesheet" type="text/css" href="./css/index.css">
...@@ -131,19 +131,6 @@ ...@@ -131,19 +131,6 @@
131 </ul> 131 </ul>
132 </div> 132 </div>
133 </div> 133 </div>
134 <div class="select_officehall">
135 <form class="layui-form">
136 <h2>办事大厅</h2>
137 <div class="layui-inline">
138 <select name="officehall" lay-filter="officehall">
139 <option value="">选择办事大厅</option>
140 <option value="1">北京</option>
141 <option value="2">上海</option>
142 <option value="3">杭州</option>
143 </select>
144 </div>
145 </form>
146 </div>
147 <!-- ----------------------------------地图api--------------------------------------------------- --> 134 <!-- ----------------------------------地图api--------------------------------------------------- -->
148 <div class="map_content contentBox"> 135 <div class="map_content contentBox">
149 <div id="container" style="width: 100%;height: 500px;"></div> 136 <div id="container" style="width: 100%;height: 500px;"></div>
......