184 lines
7.2 KiB
HTML
184 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||
<title>联系我们</title>
|
||
<link rel="stylesheet" type="text/css" href="../../css/swiper-bundle.min.css" />
|
||
<link rel="stylesheet" href="../../css/aboutUs.css">
|
||
<script src="../../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
|
||
<script src="../../js/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
|
||
<script type="text/javascript" src="http://api.map.baidu.com/geocoder/v2/?ak=mDcZsWM7gGKb7MC1bC8Mo33FScjYEr0I&output=json&address=百度大厦&city=北京市"></script>
|
||
<title>地图展示</title>
|
||
<style type="text/css">
|
||
body,
|
||
html,
|
||
#allmap {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
margin: 0;
|
||
font-family: "微软雅黑";
|
||
}
|
||
|
||
.foot-iframe {
|
||
width: 100%;
|
||
height: 400px;
|
||
}
|
||
|
||
.ty_topifrane {
|
||
width: 100%;
|
||
height: 285px;
|
||
}
|
||
|
||
.foot-iframe {
|
||
width: 100%;
|
||
height: 400px;
|
||
}
|
||
|
||
.ty_moban {
|
||
width: 100%;
|
||
box-shadow: 0px 3px 6px rgb(0 0 0 / 6%);
|
||
padding-bottom: 7px;
|
||
position: relative;
|
||
height: 2px;
|
||
z-index: 2;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
|
||
|
||
|
||
<body>
|
||
<iframe src="../../public/center-head.html" class="ty_topifrane" frameborder="0" scrolling="no"></iframe>
|
||
<p class="ty_moban"></p>
|
||
<div class="ty_her ty_pd">
|
||
联系我们
|
||
</div>
|
||
|
||
<div class="mian ty_pd">
|
||
|
||
<div class="ty_lxmiancon">
|
||
<div class="ty_lxwo">
|
||
<p>华夏艺术网</p>
|
||
<p>地址：四川省成都市武侯区天益街38号理想中心3栋601</p>
|
||
<p>手机：13880548658</p>
|
||
<p>电话：028-61529525</p>
|
||
<p>邮箱：zarts@126.com</p>
|
||
</div>
|
||
|
||
<div class="ty_lxwx">
|
||
<img src="../../img/public/lx_wx.png" alt="">
|
||
<p>华夏艺术网</p>
|
||
</div>
|
||
<div class="ty_lxwo">
|
||
<p>成都惠民职工书院</p>
|
||
<p>地址：成都市青羊区青羊大道129号文化宫2楼 </p>
|
||
<p>电话：028-81712589</p>
|
||
|
||
</div>
|
||
<div class="ty_lxwxa">
|
||
<img src="../../img/public/lx_wx.png" alt="">
|
||
<p>华夏艺术网</p>
|
||
</div>
|
||
</div>
|
||
<div id="allmap" style="width: 100%;height: 470px;margin-top: 62px;"></div>
|
||
</div>
|
||
<iframe src="../../public/foot-tab.html" class="foot-iframe" frameborder="0" scrolling="no" marginwidth='0' marginheight='0'></iframe>
|
||
</body>
|
||
<script type="text/javascript">
|
||
|
||
function LoadBaiduMapScript() {
|
||
//console.log("初始化百度地图脚本...");
|
||
const AK = "mDcZsWM7gGKb7MC1bC8Mo33FScjYEr0I";
|
||
const BMap_URL = "https://api.map.baidu.com/api?v=2.0&ak=" + AK + "&s=1&callback=onBMapCallback";
|
||
return new Promise((resolve, reject) => {
|
||
// 如果已加载直接返回
|
||
if (typeof BMap !== "undefined") {
|
||
resolve(BMap);
|
||
return true;
|
||
}
|
||
// 百度地图异步加载回调处理
|
||
window.onBMapCallback = function () {
|
||
console.log("百度地图脚本初始化成功...");
|
||
resolve(BMap);
|
||
};
|
||
// 插入script脚本
|
||
let scriptNode = document.createElement("script");
|
||
scriptNode.setAttribute("type", "text/javascript");
|
||
scriptNode.setAttribute("src", BMap_URL);
|
||
document.body.appendChild(scriptNode);
|
||
});
|
||
}
|
||
|
||
LoadBaiduMapScript().then((BMap) => {
|
||
// 百度地图API功能
|
||
function SquareOverlay(center, length, color) {
|
||
this._center = center;
|
||
this._length = length;
|
||
this._color = color;
|
||
}
|
||
var map = new BMap.Map("allmap"); // 创建Map实例
|
||
|
||
map.centerAndZoom(new BMap.Point(104.067923463, 30.6799428454), 11); // 初始化地图,设置中心点坐标和地图级别
|
||
//添加地图类型控件
|
||
|
||
// 继承API的BMap.Overlay
|
||
SquareOverlay.prototype = new BMap.Overlay();
|
||
SquareOverlay.prototype.initialize = function (map) {
|
||
// 保存map对象实例
|
||
this._map = map;
|
||
// 创建div元素，作为自定义覆盖物的容器
|
||
var div = document.createElement("div");
|
||
div.style.position = "absolute";
|
||
// 可以根据参数设置元素外观
|
||
div.style.width = this._length + "px";
|
||
div.style.height = this._length + "px";
|
||
div.style.background = this._color;
|
||
// 将div添加到覆盖物容器中
|
||
map.getPanes().markerPane.appendChild(div);
|
||
// 保存div实例
|
||
this._div = div;
|
||
// 需要将div元素作为方法的返回值，当调用该覆盖物的show、
|
||
// hide方法，或者对覆盖物进行移除时，API都将操作此元素。
|
||
return div;
|
||
}
|
||
SquareOverlay.prototype.draw = function(){
|
||
// 根据地理坐标转换为像素坐标，并设置给容器
|
||
var position = this._map.pointToOverlayPixel(this._center);
|
||
this._div.style.left = position.x - this._length / 2 + "px";
|
||
this._div.style.top = position.y - this._length / 2 + "px";
|
||
}
|
||
SquareOverlay.prototype.show = function(){
|
||
if (this._div){
|
||
this._div.style.display = "";
|
||
}
|
||
}
|
||
// 实现隐藏方法
|
||
SquareOverlay.prototype.hide = function(){
|
||
if (this._div){
|
||
this._div.style.display = "none";
|
||
}
|
||
}
|
||
map.addControl(new BMap.MapTypeControl({
|
||
mapTypes: [
|
||
BMAP_NORMAL_MAP,
|
||
BMAP_HYBRID_MAP
|
||
]
|
||
}));
|
||
|
||
map.setCurrentCity("武汉"); // 设置地图显示的城市 此项是必须设置的
|
||
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
||
})
|
||
|
||
</script>
|
||
|
||
|
||
</html> |