1、demo.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- 修改弹窗 -->
<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="addLabel">
<div class="modal-dialog" role="document" id="modaladd">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="addLabel"></h4>
</div>
<div class="modal-body" style="height: 100%;width:100%;padding: 2px;display: flex;">
<div id="divTable">
<table width="100%" border="0" cellspacing="5" cellpadding="0" style="margin-bottom:0px;border-collapse:separate;border-spacing:10px;">
</table>
</div>
<div id="divMap" style="position:relative;">
<div id="map_search" class="col-xs-4" style="position:absolute; top:12px; left:40px; z-index: 999;">
<div class="col-xs-8">
<input id="search_key" class="form-control" autocomplete="off"></input>
</div>
<div class="col-xs-4" style="padding-left: 0px;">
<button id="mapsearch" type="button" class="btn btn-info" onclick="mapsearch();">搜索</button>
</div>
</div>
<div id = "r-result" style="position: absolute;z-index: 999;left: 70px;top: 40px;">
<ul id="tablist" style="list-style-type:none;padding-left: 10px;">
</ul>
</div>
<div id="mapContent" style="width: 100%;height: 100%;"></div>
</div>
</div>
<div class="modal-footer" style="padding:5px;">
<button type="button" class="btn btn-default" data-dismiss="modal">取消<i class="ico ico-right fa fa-close"></i></button>
<button type="button" class="btn btn-primary" onclick="return saveData();">保存<i class="ico ico-right fa fa-save"></i></button>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="js/mapPointMark.js"></script>
<script src="js/demo.js"></script>
2、demo.js
var marker_icon = new BMap.Icon(cms.util.uiServicePath + "/images/fac/point_icon.png", new BMap.Size(23, 25)); // 标注点图标
var _place = "杭州市";
var have_address = true; // 是否需要显示经纬度转换后的地址,true是 false 否 $("#MarkerAddress")
var have_lnglat = true; // 是否需要显示经纬度,true是 false 否 $("#MarkerLngLat")
var zoom = 16; // 默认缩放层级
var baidu_lng = ""; // 查看详情时赋值
var baidu_lat = ""; // 查看详情时赋值
3、mapPointMark.js
// 当前js可用于百度地图单个点的页面,以下变量根据实际情况进行赋值
/* var marker_icon = new BMap.Icon(cms.util.uiServicePath + "/images/fac/point_icon.png", new BMap.Size(23, 25)); // 标注点图标
var _place = "杭州市";
var have_address = true; // 是否需要显示经纬度转换后的地址,true是 false 否 $("#MarkerAddress")
var have_lnglat = true; // 是否需要显示经纬度,true是 false 否 $("#MarkerLngLat")
var zoom = 16; // 默认缩放层级
var baidu_lng = ""; // 查看详情时赋值
var baidu_lat = ""; // 查看详情时赋值 */
// 调整窗体大小
function inincontent(){
$("#modaladd").attr("style", "height:" + ($(window).height() - 50) + "px;" + "width:" + ($(window).width()-20) + "px;margin:10px 0 0 10px;");
$("#divTable").attr("style", "max-height:" + ($("#modaladd").height() - 80) + "px;overflow-y:auto;");
$("#divMap").height($("#modaladd").height()-80);
$("#divMap").width($("#modaladd").width()-290);
}
window.onresize = function(){
inincontent();
};
// 初始化地图
$(function () {
inincontent();
initMap();
});
var map;
function initMap(){
map = new BMap.Map("mapContent",{enableMapClick:false}); // enableMapClick:false 关闭地图可点功能
map.centerAndZoom(_place, zoom);
setMapEvent();
addDrawingControl();
}
// 地图事件设置函数:
function setMapEvent() {
map.enableDragging(); // 开启拖拽
map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
map.enableKeyboard(); //启用键盘上下左右键移动地图
map.disableDoubleClickZoom(); // 关闭鼠标双击放大
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
map.addControl(ctrl_nav);
}
//地图控件添加函数:
function addDrawingControl() {
var styleOptions = {
strokeColor: "blue", //边线颜色。
fillColor: "blue", //填充颜色。当参数为空时,圆形将没有填充效果。
strokeWeight: 3, //边线的宽度,以像素为单位。
strokeOpacity: 0.8, //边线透明度,取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度,取值范围0 - 1。
strokeStyle: 'solid', //边线的样式,solid或dashed。
icon: marker_icon,
enableEditing: false //可编辑
}
//向地图添加绘制工具
drawingManager = new BMapLib.DrawingManager(map, {
isOpen: true, //是否开启绘制模式
enableDrawingTool: true, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏离值
scale: 0.8, //工具栏缩放比例
drawingModes: [
BMAP_DRAWING_MARKER
]
},
markerOptions: styleOptions //多边形的样式
});
//默认绘制点
drawingManager.setDrawingMode(BMAP_DRAWING_MARKER);
//添加鼠标绘制工具监听事件,用于获取绘制结果
drawingManager.addEventListener('overlaycomplete', overlaycomplete);
}
//绘画回调函数
var _overlay =null;
var overlaycomplete = function (e) {
if(_overlay !=null){
map.removeOverlay(_overlay);
}
e.overlay.enableDragging();
var point = new BMap.Point(e.overlay.getPosition().lng, e.overlay.getPosition().lat);
_overlay = e.overlay;
baidu_lng = point.lng;
baidu_lat = point.lat;
if(have_address){
getLocation(e.overlay.getPosition().lng,e.overlay.getPosition().lat);
}
if(have_lnglat){
$("#MarkerLngLat").val(e.overlay.getPosition().lng+','+ e.overlay.getPosition().lat);
}
//移动事件
e.overlay.addEventListener("dragend", function (e) {
baidu_lng = this.point.lng;
baidu_lat = this.point.lat;
if(have_lnglat){
$("#MarkerLngLat").val(this.point.lng+','+ this.point.lat);
}
if(have_address){
getLocation(this.point.lng , this.point.lat);
}
});
};
// 经纬度转详细地址
function getLocation(lng, lat){
var point = new BMap.Point(lng, lat);
var geoc = new BMap.Geocoder();
geoc.getLocation(point, function(rs) {
var addComp = rs.addressComponents;
var address = addComp.district;
if ("" != addComp.street) {
address += addComp.street;
}
if ("" != addComp.streetNumber) {
address += addComp.streetNumber;
if (addComp.streetNumber.indexOf("号") == -1) {
address += "号";
}
}
$("#MarkerAddress").val(address);
});
}
// 添加地图检索控件
function mapsearch(){
$("#tablist").find("li").remove();
$("#tablist").css("display","block");
var key = $("#search_key").val();
var options = {
onSearchComplete: function(results){
if (local.getStatus() == BMAP_STATUS_SUCCESS){
// $("#r-result").attr("style","display:block;")
// 判断状态是否正确
for (var i = 0; i < results.getCurrentNumPois(); i ++){
if(i < 7){ // 只取前七条数据
var poi = results.getPoi(i);
if(i%2==0){
document.getElementById("tablist").innerHTML+=
'<li style="background-color:lihghtblue;cursor: pointer;" onclick="setSearchMark(\'' + poi.point.lat+'\',\'' + poi.point.lng + '\',\'' + poi.address + '\');"><a class="text-info" style="font-size:8px">' + poi.title+'</a><br><span style="font-size:8px">地址:' + poi.address + '</span></li>';
}else{
document.getElementById("tablist").innerHTML+=
'<li style="background-color:lihghtgreen;cursor: pointer;" onclick="setSearchMark(\'' + poi.point.lat+'\',\'' + poi.point.lng + '\',\'' + poi.address + '\');"><a class="text-info" style="font-size:8px">' + poi.title+'</a><br><span style="font-size:8px">地址:' + poi.address + '</span></li>';
}
}
}
document.getElementById("r-result").style.backgroundColor="#fff"
}
}
};
var local = new BMap.LocalSearch(map, options);
local.search(key);
}
function setSearchMark(lat,lng,address){
if(lng != "" && lat != ""){
map.clearOverlays();
var new_point = new BMap.Point(lng,lat);
var marker = new BMap.Marker(new_point,{
icon: marker_icon
}); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
_overlay = marker;
map.panTo(new_point);
$("#MarkerLngLat").val(lng+','+ lat);
$("#MarkerAddress").val(address);
$("#search_key").val(address);
}
addDrawingControl();
$("#tablist").css("display","none");
}
$('#add').on('hide.bs.modal', function () {
$("#tablist").css("display","none");
$("#search_key").val("");
baidu_lng = "";
baidu_lat = "";
map.clearOverlays();
_overlay = null;
});
// 当模态框对用户可见时触发
$('#add').on('shown.bs.modal', function () {
setMark(baidu_lng,baidu_lat);
});
// 根据经纬度标注点位添加监听事件并设为中心点,没有则以_place为中心
function setMark(baidu_lng,baidu_lat){
map.clearOverlays();
addDrawingControl();
if(baidu_lng != "" && baidu_lat != ""){
var new_point = new BMap.Point(baidu_lng,baidu_lat);
map.centerAndZoom(new_point, zoom);
var marker = new BMap.Marker(new_point,{
icon: marker_icon
}); // 创建标注
marker.enableDragging();
//移动事件
marker.addEventListener("dragend", function (e) {
baidu_lng = this.point.lng;
baidu_lat = this.point.lat;
if(have_lnglat){
$("#MarkerLngLat").val(this.point.lng+','+ this.point.lat);
}
if(have_address){
getLocation(this.point.lng , this.point.lat);
}
});
map.addOverlay(marker); // 将标注添加到地图中
_overlay = marker;
}else{
map.centerAndZoom(_place, zoom);
}
}
// enter键回车触发搜索按钮
document.onkeydown = function (e) {
var theEvent = window.event || e;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code == 13) {
$('#mapsearch').click();
}
}
效果图