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
$('.area_list li').click(function () {
$(".area_list li").removeClass("active1")
$(this).addClass("active1");
$(function () {
})
var province = undefined
var city = undefined
$(".single_input").on("click", function () {
var par_label = $(this).parent();
if (this.checked) {
$(".input_label").removeClass("choose_radioed").addClass("choose_radio");
par_label.removeClass("choose_radio").addClass("choose_radioed");
} else {
}
});
$('.area_list li').click(function () {
$(".area_list li").removeClass("active1")
$(this).addClass("active1");
layui.use('element', function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
//监听导航点击
element.on('nav(demo)', function (elem) {
//console.log(elem)
layer.msg(elem.text());
});
});
//config的设置是全局的
layui.config({
base: './js/'
}).extend({ //设定模块别名
common: 'common'
});
layui.use(['form', 'common'], function () {
var common = layui.common,
form = layui.form;
//三级地址联动
common.showCity('province', 'city');
})
//区域选择
form.on('select(selectCity)', function (data) {
console.log(data)
return false;
});
//办事大厅
form.on('select(officehall)', function (data) {
let latitude = undefined
let longitude = undefined
let title = ''
if (data.value == 1) {
latitude = 116.397469
longitude = 39.908821
title = '北京'
} else if (data.value == 2) {
latitude = 121.491119
longitude = 31.235172
title = '上海'
$(".single_input").on("click", function () {
var par_label = $(this).parent();
if (this.checked) {
$(".input_label").removeClass("choose_radioed").addClass("choose_radio");
par_label.removeClass("choose_radio").addClass("choose_radioed");
} else {
latitude = 120.21201
longitude = 30.2084
title = '杭州'
}
var point = new BMapGL.Point(latitude, longitude);
var infoWindow = new BMapGL.InfoWindow(title, opts);
map.openInfoWindow(infoWindow, point);
return false;
});
});
layui.use('element', function () {
let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
//监听导航点击
element.on('nav(demo)', function (elem) {
//console.log(elem)
layer.msg(elem.text());
});
});
//config的设置是全局的
layui.config({
base: './js/'
}).extend({ //设定模块别名
common: 'common'
});
var geolocation = new BMap.Geolocation();
var gc = new BMap.Geocoder();
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var pt = r.point;
gc.getLocation(pt, function (rs) {
var addComp = rs.addressComponents;
var province = addComp.province;
var city = addComp.city;
$('.Pselected').attr('data-area', province)
$('.Cselected').attr('data-area', city)
layui.use(['form', 'common'], function () {
var common = layui.common,
form = layui.form;
//三级地址联动
common.showCity('province', 'city');
layui.use(['form', 'common'], function () {
var common = layui.common,
form = layui.form;
//三级地址联动
common.showCity('province', 'city');
//区域选择
form.on('select(selectCity)', function (data) {
return false;
});
});
var map = new BMap.Map('container');
var point = new BMap.Point(108.95346, 34.265725);
map.centerAndZoom(point, 14);
var geolocation = new BMap.Geolocation();
var gc = new BMap.Geocoder();
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
var pt = r.point;
gc.getLocation(pt, function (rs) {
var addComp = rs.addressComponents;
province = addComp.province;
city = addComp.city;
var cityName = province;
map.centerAndZoom(cityName, 14); // 初始化地图,设置中心点坐标和地图级别。 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_LARGE, anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMap.Size(40, 250) }));
var bdary = new BMap.Boundary();
bdary.get(cityName, function (rs) { //获取行政区域
var EN_JW = "180, 90;"; //东北角
var NW_JW = "-180, 90;"; //西北角
var WS_JW = "-180, -90;"; //西南角
var SE_JW = "180, -90;"; //东南角
//4.添加环形遮罩层
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 }); //建立多边形覆盖物
map.addOverlay(ply1);
//5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
var ply = new BMap.Polygon(rs.boundaries[0], { strokeWeight: 2, strokeColor: "#0091FF", fillColor: "" });
map.addOverlay(ply);
//map.setViewport(ply.getPath()); //调整视野
});
$('.Pselected').attr('data-area', province)
$('.Cselected').attr('data-area', city)
layui.use(['form', 'common'], function () {
var common = layui.common,
form = layui.form;
//三级地址联动
common.showCity('province', 'city');
})
})
})
}
else {
alert("定位失败");
}
}, { enableHighAccuracy: true });
var map = new BMap.Map('container');
var point = new BMap.Point(108.95309828, 34.2777999);
map.centerAndZoom(point, 20);
var cityName = '陕西省';
map.centerAndZoom(cityName, 15); // 初始化地图,设置中心点坐标和地图级别。 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_LARGE, anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMap.Size(40, 250) }));
var bdary = new BMap.Boundary();
bdary.get(cityName, function (rs) { //获取行政区域
var EN_JW = "180, 90;"; //东北角
var NW_JW = "-180, 90;"; //西北角
var WS_JW = "-180, -90;"; //西南角
var SE_JW = "180, -90;"; //东南角
//4.添加环形遮罩层
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 }); //建立多边形覆盖物
}
else {
alert("定位失败");
}
}, { enableHighAccuracy: true });
map.addOverlay(ply1);
//5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
var ply = new BMap.Polygon(rs.boundaries[0], { strokeWeight: 2, strokeColor: "#00f", fillColor: "" });
map.addOverlay(ply);
//map.setViewport(ply.getPath()); //调整视野
});
// 办事大厅标记
var marker = new BMap.Marker(new BMap.Point(108.95346, 34.265725));
var marker1 = new BMap.Marker(new BMap.Point(108.953381,34.256923));
// 在地图上添加点标记
map.addOverlay(marker);
map.addOverlay(marker1);
// 创建信息窗口
var opts = {
width: 200,
height: 100,
title: '办事大厅'
};
var infoWindow = new BMap.InfoWindow('西安市大唐不夜城', opts);
var infoWindow1 = new BMap.InfoWindow('南门', opts);
// 点标记添加点击事件
marker.addEventListener('click', function () {
map.openInfoWindow(infoWindow, point); // 开启信息窗口
});
marker1.addEventListener('click', function () {
map.openInfoWindow(infoWindow1, point); // 开启信息窗口
});
var opts = {
width: 100,
height: 60,
title: '办事大厅'
};
var infoWindow = new BMap.InfoWindow('雁塔区南二环西段', opts);
map.openInfoWindow(infoWindow, point);
map.centerAndZoom(new BMap.Point(108.95309828, 34.2777999), 15); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
\ No newline at end of file
})
\ No newline at end of file
......
......@@ -13,7 +13,7 @@
<link rel='icon' href='favicon.ico' type='image/x-ico' />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=0NWXXsCSawnWID4UYI7Uhrl9WgtI2IGs"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0NWXXsCSawnWID4UYI7Uhrl9WgtI2IGs"></script>
<link rel="stylesheet" type="text/css" href="../../staticLib/layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="../../staticCss/common.css" />
<link rel="stylesheet" type="text/css" href="./css/index.css">
......@@ -131,19 +131,6 @@
</ul>
</div>
</div>
<div class="select_officehall">
<form class="layui-form">
<h2>办事大厅</h2>
<div class="layui-inline">
<select name="officehall" lay-filter="officehall">
<option value="">选择办事大厅</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">杭州</option>
</select>
</div>
</form>
</div>
<!-- ----------------------------------地图api--------------------------------------------------- -->
<div class="map_content contentBox">
<div id="container" style="width: 100%;height: 500px;"></div>
......