<!DOCTYPE html>
|
|
<head>
|
<meta charset="utf-8" />
|
<title>方案布点辅助</title>
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=rER1sgBIcQxkfNSlm2wmBGZGgEERrooM"></script>
|
<script type="text/javascript" src="/js/jquery.min.js"></script>
|
</head>
|
<style type="text/css">
|
body,
|
html,
|
.main-body,
|
#mapCanvas {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
margin: 0;
|
padding: 0;
|
z-index: 0;
|
font-size: 14px;
|
font-family: "微软雅黑";
|
}
|
|
.popup-box {
|
position: absolute;
|
z-index: 1;
|
background-color: white;
|
top: 3%;
|
left: 1%;
|
padding: 14px 10px 0px;
|
text-align: center;
|
width: 280px;
|
height: 150px;
|
}
|
|
.search-box {
|
width: 220px;
|
}
|
.city-box {
|
width: 80px;
|
}
|
.set-city-box {
|
display: inline-block;
|
position: relative;
|
bottom: -2px;
|
}
|
.anchorBL {
|
display: none;
|
}
|
|
.click-handle-title {
|
text-align: left;
|
}
|
|
.marker-total {
|
text-align: left;
|
padding-left: 2px;
|
}
|
</style>
|
<div class="main-body">
|
<div class="popup-box">
|
<table>
|
<tr>
|
<td>
|
<input class="search-box" type="input" />
|
</td>
|
<td>
|
<input class="search-btn" type="button" value="搜索" />
|
</td>
|
</tr>
|
</table>
|
<table>
|
<tr>
|
<td colspan="5" class="click-handle-title">
|
当前城市：
|
<span id="city-name" style="width: 60px;height:20px;border-bottom:solid #1b1b1b 1px;display:inline-block">
|
|
</span>
|
<div class="set-city-box"><input class="city-box" type="input" /> <a id="setCityBtn" style=" text-decoration:underline; color:#00F;cursor:pointer;">设置</a></div>
|
</td>
|
</tr>
|
<tr>
|
<td>
|
<input id="clickHandle_0" type="radio" name="mapClickHandle" checked value="0" />
|
</td>
|
<td class="click-handle-title">
|
无操作
|
</td>
|
<td>
|
|
</td>
|
<td>
|
<input id="clickHandle_3" type="radio" name="mapClickHandle" value="3" />
|
</td>
|
<td class="click-handle-title">
|
删除布点
|
</td>
|
</tr>
|
<tr>
|
<td>
|
<input id="clickHandle_1" type="radio" name="mapClickHandle" value="1" />
|
</td>
|
<td class="click-handle-title">
|
[设备]布点
|
</td>
|
<td>
|
|
</td>
|
<td>
|
<input id="clickHandle_2" type="radio" name="mapClickHandle" value="2" />
|
</td>
|
<td class="click-handle-title">
|
[五角星]布点
|
</td>
|
|
</tr>
|
<tr>
|
<td colspan="2" class="marker-total">
|
[设备]总数：
|
<span id="mpointCount">0</span>
|
</td>
|
<td>
|
|
</td>
|
<td colspan="2" class="marker-total">
|
[五角星]总数：
|
<span id="starCount">0</span>
|
</td>
|
</tr>
|
</table>
|
</div>
|
<div id="mapCanvas"></div>
|
</div>
|
|
<body>
|
<script>
|
var baiduMap;
|
var markerManager = {
|
data: {
|
mpoint:[],
|
star:[],
|
_regionName:null,
|
_boundary:[],
|
_boundaryState:false
|
},
|
menuItems:{
|
boundaryMenuItem:null
|
},
|
bind: {}
|
};
|
markerManager.bindSelect = function (key, select) {
|
this.bind[key] = jQuery(select);
|
}
|
markerManager.reloadBind = function (key) {
|
var select = this.bind[key];
|
if (!!select && !!this.data[key]) {
|
select.text(this.data[key].length);
|
} else {
|
if (!this.data[key]) {
|
throw new Error("int markerManager key:" + key + ",don't have data");
|
} else {
|
console.log("int markerManager key:" + key + ",don't bind select");
|
}
|
}
|
}
|
markerManager.setRegionName = function (regionName,successCallBack,errorCallBack){
|
var thatData = this.data;
|
function getBoundary(regionName){
|
var bdary = new BMap.Boundary();
|
var map = baiduMap;
|
bdary.get(regionName, function(rs){ //获取行政区域
|
map.clearOverlays(); //清除地图覆盖物
|
var count = rs.boundaries.length; //行政区域的点有多少个
|
if (count === 0) {
|
// alert('未能获取当前输入行政区域');
|
if(!!errorCallBack&&errorCallBack instanceof Function){
|
errorCallBack(regionName);
|
}
|
return ;
|
}
|
//设置城市名称
|
$('#city-name').html(regionName);
|
$('.city-box').val('');
|
map.setCurrentCity(regionName); // 设置地图显示的城市 此项是必须设置的
|
// var pointArray = [];
|
var polygonArray = [];
|
for (var i = 0; i < count; i++) {
|
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2,fillOpacity:0.01,strokeStyle:"dashed",strokeColor: "#0000ff"}); //建立多边形覆盖物
|
// map.addOverlay(ply); //添加覆盖物
|
// pointArray = pointArray.concat(ply.getPath());
|
polygonArray.push(ply);
|
}
|
// map.setViewport(pointArray); //调整视野
|
//addlabel();
|
|
markerManager.reloadCustomOverlays();
|
//设置边界缓存之前，先清理原有边界
|
if(markerManager.isBoundaryState()){
|
switchBoundary.apply(markerManager.menuItems.boundaryMenuItem);
|
}
|
thatData._regionName = regionName;
|
markerManager.data._boundary = polygonArray;
|
if(!!successCallBack && successCallBack instanceof Function){
|
successCallBack(regionName);
|
}
|
});
|
}
|
getBoundary(regionName);
|
}
|
markerManager.openBoundary = function(){
|
// console.log(this.data._boundary);
|
if(!!this.data._boundary&&this.data._boundary.length>0){
|
for(var n =0 ;n< this.data._boundary.length;n++){
|
baiduMap.addOverlay(this.data._boundary[n]);
|
}
|
this.data._boundaryState = true;
|
}
|
}
|
markerManager.closeBoundary = function(){
|
for(var n =0 ;n< this.data._boundary.length;n++){
|
baiduMap.removeOverlay(this.data._boundary[n]);
|
}
|
this.data._boundaryState = false;
|
}
|
markerManager.isBoundaryState = function() {
|
return this.data._boundaryState;
|
}
|
markerManager.addMarker = function (key, marker) {
|
this.data[key] = !!this.data[key] ? this.data[key] : [];
|
this.data[key].push(marker);
|
this.reloadBind(key);
|
}
|
markerManager.addMpoint = function (marker) {
|
this.addMarker("mpoint", marker);
|
}
|
markerManager.addMpoint = function (marker) {
|
this.addMarker("star", marker);
|
}
|
markerManager.removeMarker = function (key, marker) {
|
if (!!this.data[key]) {
|
var markers = this.data[key];
|
for (var index in markers) {
|
var m = markers[index];
|
if (m == marker) {
|
markers.splice(index, 1);
|
}
|
}
|
this.reloadBind(key);
|
}
|
}
|
// 0,无操作，1，增加设备，2，增加五角星，3，删除布点
|
function clickHandle(args, key) {
|
var handleValue = parseInt($("input[name='mapClickHandle']:checked").val());
|
switch (handleValue) {
|
case 0:
|
break;
|
case 1:
|
addMpoint(args.point);
|
break;
|
case 2:
|
addStar(args.point);
|
break;
|
case 3:
|
removeOverlay(key, this);
|
break;
|
}
|
}
|
var switchMenuItems = {};
|
switchClickHanld = function (value) {
|
value = value.toString();
|
$("input[name='mapClickHandle']").each(function () {
|
var handleValue = $(this).val().toString();
|
if (handleValue === value) {
|
$("#clickHandle_" + value).prop("checked", true);
|
$("#clickHandle_" + value).attr("checked", true);
|
// $("#clickHandle_" + value).checked = "checked";
|
}
|
});
|
for (var key in switchMenuItems) {
|
var menuItem = switchMenuItems[key];
|
if (value == key) {
|
menuItem.setIcon("/img/select.png");
|
} else {
|
menuItem.setIcon("/img/none.png");
|
}
|
}
|
}
|
markerManager.addOverlaysToBmap = function (overlays) {
|
if(!!overlays && overlays instanceof Object){
|
for(var n in overlays){
|
var overlay = overlays[n];
|
baiduMap.addOverlay(overlay);
|
}
|
}else {
|
throw new Error("in addOverlaysToBmap overlays is not list");
|
}
|
|
}
|
markerManager.reloadCustomOverlays = function() {
|
if(!!markerManager.data['mpoint']){
|
markerManager.addOverlaysToBmap(markerManager.data['mpoint']);
|
}
|
if(!!markerManager.data['star']){
|
markerManager.addOverlaysToBmap(markerManager.data['star']);
|
}
|
if(markerManager.isBoundaryState()){
|
markerManager.openBoundary();
|
}
|
}
|
function clearBaiduOverlays() {
|
baiduMap.clearOverlays();//先清空百度覆盖物
|
markerManager.reloadCustomOverlays();
|
}
|
function clearOverlays() {
|
for (var key in markerManager.data) {
|
markerManager.data[key] = [];
|
markerManager.reloadBind(key);
|
}
|
baiduMap.clearOverlays();
|
}
|
function removeOverlay(key, marker) {
|
baiduMap.removeOverlay(marker);
|
markerManager.removeMarker(key, marker);
|
}
|
|
function addMarker(point, option) {
|
var marker = new BMap.Marker(point, option);
|
marker.addEventListener("click", function () {
|
var args = Array.prototype.slice.call(arguments);
|
clickHandle.call(marker, args, option.key);
|
});
|
var baiduMap = this.baiduMap;
|
this.baiduMap.addOverlay(marker);
|
markerManager.addMarker(option.key, marker);
|
//创建右键菜单
|
var markerMenu = new BMap.ContextMenu();
|
markerMenu.addItem(new BMap.MenuItem('删除', function () {
|
removeOverlay(option.key, marker);
|
}));
|
marker.addContextMenu(markerMenu);
|
}
|
|
function addMpoint(point) {
|
var option = {
|
enableDragging: true
|
};
|
option.icon = new BMap.Icon(
|
"/img/mpoint.png",
|
new BMap.Size(19, 30)
|
);
|
option.key = "mpoint";
|
option.offset = new BMap.Size(0, -15);
|
addMarker(point, option);
|
}
|
|
function addStar(point) {
|
var option = {
|
enableDragging: true
|
};
|
option.icon = new BMap.Icon(
|
"/img/star.png",
|
new BMap.Size(31, 31)
|
);
|
option.key = "star";
|
// option.offset = new BMap.Size(0,-15);
|
addMarker(point, option);
|
}
|
function switchBoundary() {
|
if(!markerManager.isBoundaryState()){
|
markerManager.openBoundary();
|
if(markerManager.isBoundaryState()){
|
this.setText("关闭边界");
|
}else {
|
alert('请设置当前城市');
|
}
|
}else {
|
markerManager.closeBoundary();
|
this.setText("打开边界");
|
}
|
}
|
function mapInit() {
|
var map = new BMap.Map("mapCanvas");
|
this.baiduMap = map;
|
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
|
map.setDefaultCursor('Crosshair');
|
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
|
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
var menu = new BMap.ContextMenu();
|
|
var txtMenuItem = [{
|
handleType: 0,
|
text: '无操作',
|
select: true,
|
switch: true,
|
callback: function () {
|
switchClickHanld(0);
|
},
|
},
|
{
|
handleType: 1,
|
text: '[设备]布点',
|
switch: true,
|
callback: function () {
|
switchClickHanld(1);
|
}
|
},
|
{
|
handleType: 2,
|
text: '[五角星]布点',
|
switch: true,
|
callback: function () {
|
switchClickHanld(2);
|
},
|
},
|
{
|
handleType: 3,
|
text: '删除布点',
|
switch: true,
|
callback: function () {
|
switchClickHanld(3);
|
},
|
},
|
{
|
seperator: true
|
},
|
{
|
text: '关闭搜素框',
|
callback: function () {
|
var popupBox = $(".popup-box");
|
if (popupBox.css('display') !== "block") {
|
popupBox.css('display', "block");
|
this.setText("关闭搜素框");
|
} else {
|
popupBox.css('display', "none");
|
this.setText("显示搜素框");
|
}
|
}
|
},
|
{
|
id: 'boundaryMenuItem',
|
text: '打开边界',
|
callback: function () {
|
var that = this;
|
switchBoundary.apply(this);
|
}
|
},
|
{
|
text: '清空百度地标',
|
callback: function (menuItem) {
|
clearBaiduOverlays();
|
}
|
},
|
{
|
text: '清空地图',
|
callback: function (menuItem) {
|
var result = confirm('注意! 注意! 注意! 一旦清除后将无法恢复')
|
if (result) {
|
clearOverlays();
|
}
|
}
|
}
|
];
|
for (var i = 0; i < txtMenuItem.length; i++) {
|
var item = txtMenuItem[i];
|
if (!!item['seperator']) {
|
menu.addSeparator();
|
} else {
|
if (item.select) {
|
item.icon = "/img/select.png";
|
} else {
|
item.icon = "/img/none.png";
|
}
|
var menuItem = new BMap.MenuItem(item.text, item.callback, {
|
width: 120,
|
iconUrl: item.icon
|
});
|
if(item.id == "boundaryMenuItem"){
|
markerManager.menuItems.boundaryMenuItem = menuItem;
|
}
|
menu.addItem(menuItem);
|
if (item.switch) {
|
switchMenuItems[item.handleType] = menuItem;
|
}
|
}
|
}
|
map.addContextMenu(menu);
|
map.addEventListener(
|
"click",
|
clickHandle
|
);
|
return map;
|
}
|
(function ($) {
|
var map = mapInit();
|
var local = new BMap.LocalSearch(map, {
|
renderOptions:{map: map},
|
onMarkersSet:function () {
|
markerManager.reloadCustomOverlays();
|
}
|
});
|
$('#setCityBtn').click(function () {
|
var cityName = $('.city-box').val();
|
if(!!cityName){
|
baiduMap.centerAndZoom(cityName);
|
markerManager.setRegionName(cityName,function () {
|
},function (value) {
|
alert('未找到名为【'+value+'】的城市');
|
})
|
}
|
});
|
// 搜索点击
|
$('.search-btn').on('click', function (args) {
|
var searchValue = $('.search-box').val();
|
if (!!searchValue) {
|
baiduMap.centerAndZoom(searchValue);
|
markerManager.setRegionName(searchValue,
|
function (searchValue) {
|
},function (searchValue) {
|
local.search(searchValue);
|
});
|
}
|
});
|
markerManager.bindSelect("mpoint", "#mpointCount");
|
markerManager.bindSelect("star", "#starCount");
|
$("input[name='mapClickHandle']").each(function () {
|
var handleValue = $(this).val().toString();
|
$(this).click(function(){
|
switchClickHanld(handleValue);
|
});
|
});
|
})($, baiduMap);
|
</script>
|
</body>
|
