其实百度地图官网是有许多demo和插件
地址:http://lbsyun.baidu.com/jsdemo.htm#lite_2_2
直接上代码
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
<script type="text/javascript" src="https://mapv.baidu.com/build/mapv.js"></script>
<script type="text/javascript" src="/super/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("map", {
enableMapClick: false
}); // 创建Map实例
map.centerAndZoom(new BMap.Point(120.107124, 30.873583), 13); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
map.setMapStyle({
// style: 'light'
});
//根据自己的需要修改,这里是动态显示标注点,从后台传一个json串到前台,参考上一篇文章
var myobj=eval(${cityBasicList});
//标注个数
var randomCount = myobj.length;
var data = [];
var markerArr = [];
$.each(myobj,function(i,val){
markerArr.push({ title: "名称:"+val.cityname, point: val.lng+","+val.lat, address: val.addr },);
});
for (var i = 0; i < markerArr.length; i++) {
var p0 = markerArr[i].point.split(",")[0];
var p1 = markerArr[i].point.split(",")[1];
var maker = addMarker(new window.BMap.Point(p0, p1), i);
addInfoWindow(maker, markerArr[i], i);
}
// 添加标注
function addMarker(point, index) {
var myIcon = new BMap.Icon("/super/pages/assist/img/markers.png",
new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25),
imageOffset: new BMap.Size(0, -275)
});
var marker = new BMap.Marker(point, { icon: myIcon });
map.addOverlay(marker);
return marker;
}
// 添加信息窗口
function addInfoWindow(marker, poi) {
//pop弹窗标题
var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title + '</div>';
//pop弹窗信息
var html = [];
html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
html.push('<tr>');
html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>');
html.push('<td style="vertical-align:top;line-height:16px">' + poi.address + ' </td>');
html.push('</tr>');
html.push('</tbody></table>');
var infoWindow = new BMap.InfoWindow(html.join(""), { title: title, width: 200 });
var openInfoWinFun = function () {
marker.openInfoWindow(infoWindow);
};
marker.addEventListener("click", openInfoWinFun);
return openInfoWinFun;
}
// 构造数据
for (var i = 0; i < randomCount; i++) {
data.push({
geometry: {
type: 'Point',
coordinates: [myobj[i].lng, myobj[i].lat] //X、Y轴坐标
},
name: myobj[i].cityname
});
}
var dataSet = new mapv.DataSet(data);
var options = {
fillStyle: 'rgba(255, 50, 50, 0.6)',
shadowColor: 'rgba(255, 50, 50, 1)',
shadowBlur: 30,
globalCompositeOperation: 'lighter',
methods: {
click: function (item) {
//点击事件
}
},
size: 5,
draw: 'simple'
}
var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);
//dataSet.set(data); // 修改数据
// mapvLayer.show(); // 显示图层
// mapvLayer.hide(); // 删除图层
</script>
</body>
</html>
这是比较简答的方法,但是标注点数不能过多,太多就直接卡死,需要海量标注点就把上面代码信息显示层去掉就可以了