<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
<title>百度地图API自定义地图</title>
<!--引用百度地图API-->
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
.iw_poi_title {
color: #CC5522;
font-size: 14px;
font-weight: bold;
overflow: hidden;
padding-right: 13px;
white-space: nowrap;
}
.iw_poi_content {
font: 12px arial,sans-serif;
overflow: visible;
padding-top: 4px;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7iv4GTjmEoRMLNLWIGQHDb4qFIFKsWYc"></script>
<!--调用地图的-->
<!--加载鼠标绘制工具 js css-->
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
</head>
<body style="margin:10px">
<!--百度地图容器-->
<div style="width: 697px; height: 550px; border: #ccc solid 1px;" id="dituContent"></div>
<div style="width: 100px; height: 100px; border: #ccc solid 1px;" id="Div1"></div>
</body>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap() {
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
}
//创建地图函数：
function createMap() {
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(116.395645, 39.929986);//定义一个中心点坐标
map.centerAndZoom(point, 12);//设定地图的中心点和坐标并将地图显示在地图容器中【12位缩放级别 最大18】
window.map = map;//将map变量存储在全局
}
//地图事件设置函数：
function setMapEvent() {
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}
//地图控件添加函数：
function addMapControl() {
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
map.addControl(ctrl_sca);
//添加标记开始
var marker = new BMap.Marker(new BMap.Point("116.395645", "40.929986"));//设置标记的位置
map.addOverlay(marker);
var infoWindow = new BMap.InfoWindow('<p style="color: #bf0008;font-size:14px;">阿萨德</p><p>地址：阿萨德撒</p><p>电话：阿萨德</p><p>传真：阿萨德</p>');//标记显示信息
marker.addEventListener("click", function () {//打开标记的事件【mouseover 】
this.openInfoWindow(infoWindow);
});
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
//marker.openInfoWindow(infoWindow);//在地图上打开信息窗口【定位到次标记】
//添加标记结束
//根据Ip定位城市位置开始
//function myFun(result) {
// var cityName = result.name;
// map.setCenter(cityName);
// alert("当前定位城市:" + cityName);
//}
//var myCity = new BMap.LocalCity();
//myCity.get(myFun);
//根据Ip定位城市位置结束
//根据浏览器定位开始
//var geolocation = new BMap.Geolocation();
//geolocation.getCurrentPosition(function (r) {
// if (this.getStatus() == BMAP_STATUS_SUCCESS) {
// var mk = new BMap.Marker(r.point);
// map.addOverlay(mk);
// map.panTo(r.point);
// alert('您的位置：' + r.point.lng + ',' + r.point.lat);
// }
// else {
// alert('failed' + this.getStatus());
// }
//}, { enableHighAccuracy: true })
//根据浏览器定位结束
//规划步行路线开始
//var walking = new BMap.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true } });
//walking.search("山东省临沂市沂南县马牧池乡东波池南岭", "山东省临沂市沂南县马牧池乡");//输入起始位置 跟结束位置
//规划步行路线结束
//设置点的新图标 开始
var pt = new BMap.Point(116.417, 39.909);
var myIcon = new BMap.Icon("img/zx1.png", new BMap.Size(30, 20));//size的值和图片大小近似
var marker2 = new BMap.Marker(pt, { icon: myIcon }); // 创建标注
//为新图标设置提示信息
var infoWindowNew = new BMap.InfoWindow('<p style="color: #bf0008;font-size:14px;">阿萨德</p><p>地址：阿萨德撒</p><p>电话：阿萨德</p><p>传真：阿萨德</p>');//标记显示信息
marker2.addEventListener("click", function () {//打开标记的事件【mouseover 】
this.openInfoWindow(infoWindowNew);
});
map.addOverlay(marker2);
//设置点的新图标 结束
//在地图上设直线 开始
//var polyline = new BMap.Polyline([
//new BMap.Point(116.399, 39.9513),
//new BMap.Point(116.412, 39.9513),
//new BMap.Point(116.433, 39.9513),
//new BMap.Point(116.433, 40.000),
//], { strokeColor: "red", strokeWeight: 2, strokeOpacity: 1 }); //创建折线
//map.addOverlay(polyline); //增加折线
//在地图上设直线 结束
//在地图上绘制多边形 开始【引入js css】
var overlays = [];
//绘制完成调用的事件
var overlaycomplete = function (e) {
overlays.push(e.overlay);
//获取绘制图形的坐标
var path = e.overlay.getPath();//Array<Point> 返回多边型的点数组
for (var i = 0; i < path.length; i++) {
alert("lng:" + path[i].lng + "\n lat:" + path[i].lat);
}
};
//定义绘制的样式
var styleOptions = {
strokeColor: "red", //边线颜色。
fillColor: "", //填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 3, //边线的宽度，以像素为单位。
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
strokeStyle: 'solid' //边线的样式，solid或dashed。
}
//实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, //是否开启绘制模式
enableDrawingTool: true, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏离值
},
circleOptions: styleOptions, //圆的样式
polylineOptions: styleOptions, //线的样式
polygonOptions: styleOptions, //多边形的样式
rectangleOptions: styleOptions //矩形的样式
});
//添加鼠标绘制工具监听事件，用于获取绘制结果
drawingManager.addEventListener('overlaycomplete', overlaycomplete);
//清除绘制的图形事件
function clearAll() {
for (var i = 0; i < overlays.length; i++) {
map.removeOverlay(overlays[i]);
}
overlays.length = 0;
}
//在地图上绘制多边形结束
//获取坐标点
//map.addEventListener("click", function (e) {
// alert(e.point.lng + "--" + e.point.lat);
//});
//添加 事件
//function addClick() {
// map.addEventListener("click", showInfo);
//}
////注销事件
//function removeClick() {
// map.removeEventListener("click", showInfo);
//}
}
initMap();//创建和初始化地图
</script>
</html>
