*{
margin: 0px;
padding: 0px;
}
#allmap {
width: 100%;
height: 630px;
}
.mt-5{
margin-top: 5px;
}
.trianglearea{
position: absolute;
top: 15px;
left: -10px;
height: 0px;
width: 0px;
border-bottom: 10px solid transparent;
border-right: 10px solid #02012A;
border-top: 10px solid transparent;
opacity: 0.55;
}
.bigbox{
position: relative;
width: 150px;
height: 140px;
}
.bgbox{
width: 140px;
height:140px;
background-color:#02012A;
opacity: 0.55;
border-radius: 5px;
}
.conbox{
width: 120px;
margin-left: 10px;
float: left;
position:absolute;
top:0px;
}
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("上海"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.setMapStyleV2({styleJson:yanmou});//设备背景色
// 点示例
var point = new BMap.Point(121.48, 31.22);
map.centerAndZoom(point, 5);
// 编写自定义函数,创建标注
function addMarker(point){
// 坐标icon
var marker = new BMap.Marker(point);
map.addOverlay(marker);//将标注加入地图
// 坐标文字
var opts = {
position : point, // 指定文本标注所在的地理位置
offset : new BMap.Size(18, -30), //设置文本偏移量
width:150,
height:140
}
var label = new BMap.Label('
'
'+'
'
'
'
'
'
'
'+'
label.setStyle({
color:"#DEE6EC",
lineHeight : "20px",
background:"transparent",
border:"none"
},);
marker.addEventListener("mouseover", function(){
map.addOverlay(label); //监听鼠标移入,展示信息窗口
});
marker.addEventListener("mouseout", function(){
map.removeOverlay(label); //监听鼠标移出,关闭信息窗口
});
marker.addEventListener("click",function(){
location.href='http://www.baidu.com';
});
}
var coordinates=[{'lnt':121.48,'lng':31.22},{'lnt':116.41,'lng':39.92},{'lnt':116.41,'lng':22.62},{'lnt':116.41,'lng':30.52}]/* 经纬度坐标 */
coordinates.forEach(function(item){
data = new BMap.Point(item.lnt,item.lng)
map.addOverlay(data,6)
addMarker(data)
})
/* 放缩效果 */
function ZoomControl(){
// 默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;
this.defaultOffset = new BMap.Size(30, 40);
}
// 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();
// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
ZoomControl.prototype.initialize = function(map){
// 创建一个DOM元素
var zoomin = document.createElement("div");
// 添加文字说明
var zoom=document.createElement("div");
var narrow=document.createElement("div");
zoomin.appendChild(zoom)
zoomin.appendChild(document.createElement("br"))
zoomin.appendChild(narrow)
// 设置样式
zoom.className='fa fa-plus';
narrow.className='fa fa-minus';
zoomin.style.cursor = "pointer";
zoomin.style.color = "#C5CCD2";
zoomin.style.fontSize="24px";
// 绑定事件,点击一次放大两级
zoom.onclick = function(e){
map.setZoom(map.getZoom() + 2);
}
narrow.onclick = function(e){
map.setZoom(map.getZoom() - 2);
}
// 添加DOM元素到地图中
map.getContainer().appendChild(zoomin);
// 将DOM元素返回
return zoomin;
}
// 创建控件
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);