百度地图api
百度地图实例：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap {height:600px; width: 100%;}
#control{width:100%;}
.haha{
background-color: #999999;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=islQ5sFh0a8CRpzxwKbNCvYo"></script>
<script type="text/javascript" src="js/base.js"></script>
<title>区边界</title>
</head>
<body>
<div class="mws-panel grid_8">
<div class="mws-panel-header">
<span class="mws-i-24 i-apartment-building">${school.school_name}</span>
</div>
<div class="mws-panel-body" style="background-color: #ebe6eb">
<div class="mws-panel-toolbar top clearfix">
<ul>
<li><a onclick="polygon.enableEditing();marker.enableDragging();"
class="mws-ic-16 ic-lock" >开启编辑</a></li>
<li><a onclick="polygon.disableEditing();marker.disableDragging();"
class="mws-ic-16 ic-lock-unlock" >关闭编辑</a></li>
<li><a class="mws-ic-16 ic-edit" onclick="border_update();">保存编辑</a></li>
<li><a class="mws-ic-16 ic-add" onclick="border_add()">新增校区</a></li>
<li><a class="mws-ic-16 ic-delete" onclick="border_delete()">删除校区</a></li>
</ul>
</div>
<div class="mws-panel-toolbar top clearfix">
<ul id="test" >
</ul>
</div>
<div id="allmap"></div>
<form action="school_border_update" id="hidden_form">
<input type="hidden" name="school.school_id"
value="${school.school_id}" id="schoolid">
<input type="hidden" name="school.school_name"
value="${school.school_name}" id="schoolname">
<input type="hidden" name="school.school_lng"
value="${school.school_lng}" id="school_lng">
<input type="hidden" name="school.school_lat"
value="${school.school_lat}" id="school_lat">
<input type="hidden" name="school.border_lng"
value="init" id="border_lng">
<input type="hidden" name="school.border_lat"
value="init" id="border_lat">
<input type="hidden" name="pageNum"
value="0" id="pageNum">
</form>
</div>
<div> </div>
</div>
</body>
<script type="text/javascript">
// 百度地图API功能
var polygon;
var map;
var marker;
initMap();
var json;
//创建和初始化地图函数：
function initMap() {
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
getBorder(); //异步加载得到边界并向地图添加覆盖物
}
//创建地图
function createMap() {
//var center_lng = "${school.school_lng}";
//var center_lat = "${school.school_lat}";
map = new BMap.Map("allmap",{enableMapClick:false});
//var point = new BMap.Point(center_lng, center_lat);
//map.centerAndZoom(point, 16);
map.addControl(new BMap.MapTypeControl({mapTypes:
[BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP]}));
//普通 卫星 混合
}
//设置地图事件
function setMapEvent() {
map.enableScrollWheelZoom();
map.enableKeyboard();
map.enableDragging();
map.enableDoubleClickZoom()
}
function addClickHandler(target, window) {
target.addEventListener("click", function() {
target.openInfoWindow(window);
});
}
//向地图添加控件
function addMapControl() {
var scaleControl = new BMap.ScaleControl({
anchor : BMAP_ANCHOR_BOTTOM_LEFT
});
scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
map.addControl(scaleControl);
var navControl = new BMap.NavigationControl({
anchor : BMAP_ANCHOR_TOP_LEFT,
type : BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(navControl);
var overviewControl = new BMap.OverviewMapControl({
anchor : BMAP_ANCHOR_BOTTOM_RIGHT,
isOpen : true
});
map.addControl(overviewControl);
}
//异步加载得到边界并向地图添加覆盖物
function getBorder(){
var school_id = "${school.school_id}";
$.ajax({
url:address+"forAjax_getBorder?school_id="+ school_id,
type: "GET",
success:function(rs_json){
json = rs_json;
for(var i = 0; i < rs_json.school_border.length; i++){
var li = "<li><a id=\""+i+"\" class=\"mws-ic-16 ic-buildings\" onclick=goPolygon('"+i+"') >";
li += "校区"+i;
li += "</a></li>";
$("#test").append(li);
}
goPolygon(0);
},
});
}
function goPolygon(n) {
$("#pageNum").val(n);
$("a").removeClass("haha");
$("#"+n).addClass("haha");
map.clearOverlays();
var point = new BMap.Point(json.school_border[n].longitude[0],json.school_border[n].latitude[0]);
map.centerAndZoom(point, 16);
// var myIcon = new BMap.Icon("css/icons/32/location_pin.png", new BMap.Size(32,32));
// marker = new BMap.Marker(point,{icon:myIcon}); // 创建标注
// map.addOverlay(marker); // 将标注添加到地图中
// marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
var ar = new Array();
for ( var i = 0; i < json.school_border[n].longitude.length; i++) {
var point = new BMap.Point(json.school_border[n].longitude[i],
json.school_border[n].latitude[i]);
ar.push(point);
}
addPolygon(ar);
}
function addPolygon(ar){
polygon = new BMap.Polygon(ar, {
strokeColor : "blue",
strokeWeight : 1,
strokeOpacity : 1,
fillOpacity : 0.2,
fillColor : "red"
}); //创建多边形
map.addOverlay(polygon); //增加多边形
}
//更新边界
function border_update() {
var lngs = "";
var lats = "";
var school_id = document.getElementById("schoolid").value;
for ( var i = 0; i < polygon.getPath().length; i++) {
lngs = lngs + polygon.getPath()[i].lng + ",";
lats = lats + polygon.getPath()[i].lat + ",";
}
document.getElementById("border_lng").value = lngs;
document.getElementById("border_lat").value = lats;
document.getElementById("hidden_form").submit();
}
function border_add(){
$("#hidden_form").attr("action","school_border_add").submit();
}
function border_delete(){
var result = window.confirm("您确定要删除该区吗？");
if (result) {
$("#hidden_form").attr("action","school_border_delete").submit();
}
}
</script>
</html>
