异步加载地图
//异步加载地图
function loadJScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//api.map.baidu.com/api?v=2.0&ak=&ak=11Z8uiP8kIz6AG0Vjiwzbc5f9I**&callback=init';
document.body.appendChild(script);
}
window.onload = loadJScript;
初始化地图
//全局变量;
var map;
function init() {
map = new BMap.Map("container", {
enableMapClick: false,
maxZoom: 12
});
var point = new BMap.Point(120.3663, 31.534519);
map.centerAndZoom(point, 12);
map.enableScrollWheelZoom();
map.disableDragging(); //禁止拖拽
// map.setMapType(BMAP_SATELLITE_MAP);
//渲染多边形;
getBoundary();
}
封装函数
//获取绘制的多边形边界;
function getBoundary() {
var areas = [];
//建立多边形覆盖物;
var colors = ["#fff492", "#fff492", "#98d057", "#e19ee6", "#1ad3da", "#ffc11d", "#98e800", "#b95817", "#03a9f4", "#39d0a4", "#8bbb53"];
var ply = [];
for (var i = 0; i < areas.length; i++) {
ply[i] = new BMap.Polygon(areas[i], {strokeWeight: 2, strokeOpacity: 0.5, strokeColor: "#01AAED"});
ply[i].setFillColor(colors[i]);
ply[i].setFillOpacity(0.35);
//添加覆盖物;
map.addOverlay(ply[i]);
//多边形鼠标高亮效果;
getMouse(areas[i], i);
}
//多边形标签;
var labelCenter = [], ployLabel = [];
function addLabel(arr, i) {
var lng = arr.split(";")[0].split(",")[0];
var lat = arr.split(";")[0].split(",")[1];
labelCenter[i] = new BMap.Point(lng, lat);
var labelContent = "<div class='content'>" + labelData[i] + "</div>";
ployLabel[i] = new BMap.Label(labelContent, {
offset: new BMap.Size(0, 0),
position: labelCenter[i]
});
ployLabel[i].setStyle({
"z-index": "999999",
"padding": "10px",
"width": "300px",
"border": "0px solid #2F4056"
});
map.addOverlay(ployLabel[i]);
}
//给多边形添加鼠标事件;
function getMouse(arr, i) {
ply[i].addEventListener("mouseover", function () {
ply[i].setStrokeColor("red");
ply[i].setFillColor("#fff");
addLabel(arr, i);
map.panTo(new BMap.Point(panToCenter[i][0], panToCenter[i][1]));
});
ply[i].addEventListener("mouseout", function () {
ply[i].setStrokeColor("#01AAED");
ply[i].setFillColor(colors[i]);
//清除标签;
map.removeOverlay(ployLabel[i]);
});
ply[i].addEventListener("click", function () {
console.log(i + " 多边形单击事件API接口.")
});
}
lockdatav Done!