其實百度地圖官網是有許多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>
這是比較簡答的方法,但是標註點數不能過多,太多就直接卡死,需要海量標註點就把上面代碼信息顯示層去掉就可以了