使用百度地图api制作简单的demo

最新推荐文章于 2024-05-11 14:40:49 发布

qzp_sky

最新推荐文章于 2024-05-11 14:40:49 发布

阅读量760

点赞数

本文链接：https://blog.csdn.net/qzp_sky/article/details/97387895

版权

<!DOCTYPE html>

<html>

<head>

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;

}

</style>

</head>

<body>

</body>

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('<div class="bigbox">'+

'<div class="bgbox"></div>'+

'<div class="conbox">'+

'<div style ="width:120px;margin-top:10px;white-space:normal">上海泰威技术发展股份有限公司</div>'+

'<div class="mt-5">设备数: <span>20</span></div>'+

'<div class="mt-5">生产中设备: <span>220</span></div>'+

'<div class="mt-5">异常设备: <span>2</span></div>'+

'</div>'+

'<div class="trianglearea"></div>'+

'</div>', opts); // 创建文本标注对象

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);

</script>

</html>

qzp_sky

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用百度地图api制作简单的demo

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>地图啊，我恨</title><link rel="stylesheet" href="./CSS/font-awesome-4....
复制链接

扫一扫