|
Server : nginx/1.20.1 System : Linux iZ2ze9ojcl78uluczwag69Z 4.18.0-240.22.1.el8_3.x86_64 #1 SMP Thu Apr 8 19:01:30 UTC 2021 x86_64 User : www ( 1000) PHP Version : 7.3.28 Disable Function : passthru,exec,system,chroot,chgrp,chown,shell_exec,popen,proc_open,pcntl_exec,ini_alter,ini_restore,dl,openlog,syslog,readlink,symlink,popepassthru,pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,imap_open,apache_setenv Directory : /www/wwwroot/0531yanglao.com/templates/wap/ |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>机构地图-济南养老网</title>
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<!-- <link rel="stylesheet/less" href="less.less" />
<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.2/less.min.js"></script> -->
<base href="{:server_url()}" />
<link rel="stylesheet" type="text/css" href="./css/appstyle.css"/>
<link rel="stylesheet" href="./css/swiper.min.css">
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=BzRSIItkozQGMU95cFMBROe8zEC33XfX"></script>
<script src="http://api.map.baidu.com/library/RectangleZoom/1.2/src/RectangleZoom_min.js"></script>
</head>
<style type="text/css">
</style>
<body>
<!-- 顶部 -->
<div class="dingbu">
<img src="images/fanhui.png" onclick="goBack()" />
<h4>机构地图
</h4>
<img src="images/nav.png" class="but" />
{include file='navi'}
</div>
<header></header>
<div class="container" style="height:90vh;" id="container"></div>
</body>
<script src="./js/jquery-3.6.0.js"></script>
<script src="./js/swiper.min.js"></script>
<script src="./js/appstyle.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/page.js"></script>
<script type="text/javascript">
var map = new BMapGL.Map('container', {
restrictCenter: false
});
var point = new BMapGL.Point("117.12639941261048,36.65655420178723");
map.centerAndZoom(point, 8);
map.enableScrollWheelZoom();
var citys = [ '历城区','钢城区', '市中区', '章丘区', '平阴县','槐荫区',
'天桥区', '长清区', '济阳区', '莱芜区', '商河县'
];
var bdary = new BMapGL.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 BMapGL.Polygon(rs.boundaries[i], {
strokeWeight: 1,
strokeColor: '#90c8f1'
}); // 建立多边形覆盖物
map.addOverlay(ply);
pointArray = pointArray.concat(ply.getPath());
}
map.setViewport(pointArray); // 调整视野
// 绘制带高度的点
var cityGeo = new BMapGL.Geocoder();
for (let i = 0; i < citys.length; i++) {
cityGeo.getPoint(citys[i], function(point) { // 地址解析获取对应经纬度
var pt = new BMapGL.Point(point.lng, point.lat);
var marker = new BMapGL.Marker3D(pt, Math.round(Math.random() * 13000), {
size: 50,
shape: 'BMAP_SHAPE_CIRCLE',
fillColor: '#454399',
fillOpacity: 0.5,
fontSize: 28,
});
// 添加鼠标事件
marker.addEventListener('mouseover', function(e) {
// e.target.setFillColor('#f00');
// console.log(e.latLng.lng,e.latLng.lat)
// --- 添加行政区划 ---
var dist = new BMapGL.DistrictLayer({
name: '('+citys[i]+')',
fillColor: '#ffffff',
fillOpacity: 0.5,
strokeColor: '#daeafa',
strokeOpacity:1
});
map.addDistrictLayer(dist);
// --- 行政区划添加鼠标事件 ---
dist.addEventListener('mouseover', function (e) {
e.currentTarget.setFillColor('#fea65e');
});
dist.addEventListener('mouseout', function (e) {
e.currentTarget.setFillColor(e.currentTarget.style.fillColor);
});
});
// marker.addEventListener('mouseout', function(e) {
// e.target.setFillColor('#454399');
// })
marker.addEventListener('click', function(e) {
var map = new BMapGL.Map('container'); // 创建Map实例
map.centerAndZoom(citys[i], 12); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
var dist = null;
map.removeDistrictLayer(dist);
dist = new BMapGL.DistrictLayer({
name: '(' + citys[i] + ')',
fillColor: '#ffffff',
fillOpacity: 0.1,
strokeColor: '#daeafa',
strokeOpacity:1
});
map.addDistrictLayer(dist);
// 创建点标记
var marker1 = new BMapGL.Marker(new BMapGL.Point(117.16367352178034, 37.32482265202539));
// 在地图上添加点标记
map.addOverlay(marker1);
var opts = {
position: new BMapGL.Point(117.16367352178034, 37.32482265202539), // 指定文本标注所在的地理位置
offset: new BMapGL.Size(3, -45) // 设置文本偏移量
};
// 创建文本标注对象
var label = new BMapGL.Label('养老院名称', opts);
// 自定义文本标注样式
label.setStyle({
color: '#f28832',
borderRadius: '5px',
borderColor: '#ccc',
padding: '5px',
fontSize: '12px',
height: '15px',
lineHeight: '15px',
fontFamily: '微软雅黑'
});
map.addOverlay(label);
// map.addEventListener('click', function (e) {
// alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
// });
label.addEventListener('click', function(e) {
alert('点击')
});
})
map.addOverlay(marker);
});
}
});
</script>
</html>