百度地图API操作
设置标注
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>设置标注</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js" charset="UTF-8"></script>
<style>
html,body{margin:0;padding:0;}
.bz {position:absolute;top:5px;right:100px;z-index:20;background:#dddddd;border:1px solid #ffffff;width:90px;height:40px;text-align:center;}
.bzfont {float:left;font-size:12px;display:inline;line-height:40px;padding-left:4px;padding-top:2px;}
.bzimg {cursor:pointer;display:inline;padding-top:5px;}
table {width:250px;border-top:1px solid #999;border-left:1px solid #999;border-spacing:0;font-size:12px;}
table td {padding:5px;border-bottom:1px solid #999;border-right:1px solid #999;}
.td1 {border-bottom:none;border-right:none;text-align:right;}
.td2 {border-bottom:none;padding:0px;}
.btn {border:1px solid #C9C9C9;background-color:#fff;color:#555;border-radius:3px;cursor:pointer;font-size:12px;height:26px;}
.btn:hover {border:1px solid #bab9b9;background-color:#f7f6f6;color:#555;border-radius:3px;cursor:pointer;font-size:12px;height:26px;}
</style>
</head>
<body>
<div style="width:100%;height:600px;border:1px solid #ccc;" id="container"></div>
<div class="bz">
<div class="bzfont">正策标记</div><img id="mypig" class="bzimg" imgval="1" src='../img/point.png' />
</div>
</body>
</html>
<script type="text/javascript">
createMap();
setMapEvent();
addMapControl();
//创建地图
function createMap() {
var map = new BMap.Map("container"); //创建【Map实例】
map.centerAndZoom("上海", 12); //设置【中心点坐标】和【地图级别】
window.map = map; //将map变量存储在全局
}
//地图事件加载
function setMapEvent() {
map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard(); //启用键盘上下左右键移动地图
}
//地图控件加载
function addMapControl() {
map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE })); //左上角鱼骨控件【缩放控件】
map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT })); //左下角比例尺【比例尺控件】
map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP] })); //右上角【地图/卫星】
map.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_ZOOM, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //右下角缩放【+/-】
}
var infoWindow;
//标注事件绑定
$("#mypig").on("click", function (even) {
window.clickPointer = "tuodong";
var str = $(this).attr("imgVal");
map.addEventListener("click", function (e) {
if (str == 1) {
var point = new BMap.Point(e.point.lng, e.point.lat);
var myIcon = new BMap.Icon("../img/point.png",new BMap.Size(32, 32));
var marker = new BMap.Marker(point, {icon: myIcon }); // 创建标注
marker.disableMassClear();
marker.name = "zichao";
map.addOverlay(marker);
var tiphtml = '<table>';
tiphtml += '<tr><td colspan="2" style="font-weight:600;">添加标记</td></tr>';
tiphtml += '<tr><td class="td1">标题：</td><td class="td2"><input type="text" id="txtTit" style="width:182px;" placeholder="请输入标题" autocomplete="off"></td></tr>';
tiphtml += '<tr><td class="td1">地址：</td><td class="td2"><textarea id="txtDesc" placeholder="请输入地址" rows="3" style="width:180px;"></textarea></td></tr>';
tiphtml += '<tr>';
tiphtml += '<td colspan="2" style="text-align:right;padding-right:15px;">';
tiphtml += '<button id="btnSave" class="btn" onclick="savemap(\'' + e.point.lng + '\',\'' + e.point.lat + '\');">保 存</button>';
tiphtml += '<button id="btnDel" class="btn" onclick="del(\'zichao\');">删 除</button>';
tiphtml += '</td>';
tiphtml += '</tr>';
tiphtml += '</table>';
infoWindow = new BMap.InfoWindow(tiphtml);
map.openInfoWindow(infoWindow, point);
marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); }); //点击marker弹出信息窗口
}
str = 0;
});
});
function savemap(plng,plat) {
alert("坐标：" + plng + "," + plat + "；级别：" + map.getZoom() + "；标题：" + document.getElementById("txtTit").value + "；地址：" + document.getElementById("txtDesc").value);
infoWindow.close();
}
function del(arg) {
var allOverlay = this.map.getOverlays();
for (var i = 0; i < allOverlay.length; i++) {
if (allOverlay[i].name == arg) {
map.removeOverlay(allOverlay[i]);
infoWindow.close();
break;
}
}
}
</script>
显示标注
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>显示标注</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<style>
.BMap_bubble_title {font-size:12px;font-weight:bold;text-align:left;padding:2px;}
.BMap_bubble_content {font-size:12px;background-color:white;padding-left:5px;}
</style>
</head>
<body>
<div style="width:800px;height:500px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
createMap();
setMapEvent();
addMapControl();
setMK();
//创建地图
function createMap() {
var map = new BMap.Map("container"); //创建【Map实例】
var point = new BMap.Point(121.608998, 31.026971); //定义一个【坐标】
map.centerAndZoom(point, 15); //设定【坐标】和【地图级别】
window.map = map; //将map变量存储在全局
}
//地图事件加载
function setMapEvent() {
map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard(); //启用键盘上下左右键移动地图
}
//地图控件加载
function addMapControl() {
map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE })); //左上角鱼骨控件【缩放控件】
//map.addControl(new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 })); //右下角缩略图【缩略图控件】
map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT })); //左下角比例尺【比例尺控件】
map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP] })); //右上角【地图/卫星】
map.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_ZOOM, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //右下角缩放【+/-】
}
//地图标注加载
function setMK() {
var point = new BMap.Point(121.608998, 31.026971);
var myIcon = new BMap.Icon("../img/point.png", new BMap.Size(32, 32), { //自定义图片
imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
});
var myMk = new BMap.Marker(point, { icon: myIcon }); //创建标注
var opts = {
width: 120, // 信息窗口宽度
height: 60, // 信息窗口高度
title: "东升家园" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("地址：上海市浦东新区航头镇环镇东路200弄", opts); // 创建信息窗口对象
myMk.addEventListener("mousedown", function () { this.openInfoWindow(infoWindow); }); //点击marker弹出信息窗口
map.addOverlay(myMk); //将标注marker添加到地图上
map.openInfoWindow(infoWindow, point); //地图初始化时就打开信息窗口
}
</script>
定位
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定位功能</title>
<link rel="icon" type="image/x-icon" href="http://www.jixingjx.com/favicon.ico" />
<meta name="keyword" content="冀兴驾校,冀兴驾校手机版,jixingjiaxiao" />
<meta name="description" content="冀兴驾校手机版，让你更快更准确地找到冀兴驾校！" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<style>
body, html, #jx_map {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font-size: 14px;
}
</style>
</head>
<body>
<div id="jx_map"></div>
</body>
<script type="text/javascript">
var map = new BMap.Map("jx_map");
map.centerAndZoom("北京", 14);
map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP, BMAP_HYBRID_MAP], anchor:BMAP_ANCHOR_TOP_LEFT}));
map.addControl(new BMap.NavigationControl({type:BMAP_NAVIGATION_CONTROL_ZOOM, anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));
// 定义一个控件类
function MyLocation(){
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(10, 10);
}
MyLocation.prototype = new BMap.Control();
MyLocation.prototype.initialize = function(map){
var div = document.createElement("div");
div.appendChild(document.createTextNode("定位"));
// 设置样式
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "white";
div.style.padding = "10px";
div.style.borderRadius = "5px";
div.onclick = function(e){
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);
gc.getLocation(r.point, function(rs){
var sContent = "您的位置是:</br>" + rs.address;
var infoWindow = new BMap.InfoWindow(sContent, {width:150, offset:new BMap.Size(0,-20)});
map.openInfoWindow(infoWindow, r.point);
});
}
else {
alert("网络不通，请稍后再试。");
}
})
}
map.getContainer().appendChild(div);
return div;
}
var mylocation = new MyLocation(); //定位
map.addControl(mylocation);
var gc = new BMap.Geocoder(); //地址解析
</script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fc20b7442b4e0e7b9e42e799fae5f60bd' type='text/javascript'%3E%3C/script%3E"));
</script>
</html>
多个标记
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>酷讯酒店地图</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map =new BMap.Map("container");
var point =new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 14);
var myIcon =new BMap.Icon("http://dev.baidu.com/wiki/static/map/API/examples/images/Mario.png", new BMap.Size(32, 70), { //小车图片
offset: new BMap.Size(0, -5), //相当于CSS精灵
imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
});
var points = [new BMap.Point(116.411776,39.942833),new BMap.Point(116.320791,40.003682),new BMap.Point(116.275186,39.896095),new BMap.Point(116.425098,39.946249),new BMap.Point(116.359823,39.984761),new BMap.Point(116.316479,39.98323),new BMap.Point(116.385986,39.946124),new BMap.Point(116.427545,40.00796),new BMap.Point(116.446965,39.911603),new BMap.Point(116.454579,39.946652)]; //10个坐标点
var marker1 =new BMap.Marker(points[1],{icon:myIcon}); // 创建10个标注
var marker2 =new BMap.Marker(points[2],{icon:myIcon});
var marker3 =new BMap.Marker(points[3],{icon:myIcon});
var marker4 =new BMap.Marker(points[4],{icon:myIcon});
var marker5 =new BMap.Marker(points[5],{icon:myIcon});
var marker6 =new BMap.Marker(points[6],{icon:myIcon});
var marker7 =new BMap.Marker(points[7],{icon:myIcon});
var marker8 =new BMap.Marker(points[8],{icon:myIcon});
var marker9 =new BMap.Marker(points[9],{icon:myIcon});
var marker0 =new BMap.Marker(points[0],{icon:myIcon});
map.addOverlay(marker1); // 将标注添加到地图中
map.addOverlay(marker2);
map.addOverlay(marker3);
map.addOverlay(marker4);
map.addOverlay(marker5);
map.addOverlay(marker6);
map.addOverlay(marker7);
map.addOverlay(marker8);
map.addOverlay(marker9);
map.addOverlay(marker0);
map.setViewport(points); //调整地图的最佳视野为显示标注数组point
var opts1 = {title : '<span style="font-size:14px;color:#0A8021">如家快捷酒店</span>'};
var opts2 = {title : '<span style="font-size:14px;color:#0A8021">昆仑大厦</span>'};
var opts3 = {title : '<span style="font-size:14px;color:#0A8021">华夏银行</span>'};
var opts4 = {title : '<span style="font-size:14px;color:#0A8021">成都小吃</span>'};
var opts5 = {title : '<span style="font-size:14px;color:#0A8021">锦绣大饭店</span>'};
var opts6 = {title : '<span style="font-size:14px;color:#0A8021">七天快捷酒店</span>'};
var opts7 = {title : '<span style="font-size:14px;color:#0A8021">中央民族大学</span>'};
var opts8 = {title : '<span style="font-size:14px;color:#0A8021">昌平汽车专修学院</span>'};
var opts9 = {title : '<span style="font-size:14px;color:#0A8021">百度大厦</span>'};
var opts0 = {title : '<span style="font-size:14px;color:#0A8021">海尔电器销售点</span>'};
var infoWindow1 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts1); // 创建信息窗口对象，引号里可以书写任意的html语句。
var infoWindow2 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市海淀区紫竹院123号</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts2);
var infoWindow3 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市海淀区紫竹院123号</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts3);
var infoWindow4 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市海淀区紫竹院123号</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts4);
var infoWindow5 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts5);
var infoWindow6 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市大钟寺沧澜大厦</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts6);
var infoWindow7 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts7);
var infoWindow8 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市哇哈哈路鲜鱼一条街</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts8);
var infoWindow9 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts9);
var infoWindow0 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts0);
marker1.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow1);});
marker2.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow2);});
marker3.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow3);});
marker4.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow4);});
marker5.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow5);});
marker6.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow6);});
marker7.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow7);});
marker8.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow8);});
marker9.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow9);});
marker0.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow0);});
gongju();
function gongju() {
// 自定义控件
function ZoomControl() {
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(15, 1);
}
var size = new BMap.Size(350, 1);
map.addControl(new BMap.CityListControl({
anchor: BMAP_ANCHOR_TOP_RIGHT,
offset: size,
}));
// 继承BMap.Control
ZoomControl.prototype = new BMap.Control;
// 控件初始化
ZoomControl.prototype.initialize = function (map) {
var div = document.createElement('div');
var big = document.createElement('img');
var small = document.createElement('img');
var celiang = document.createElement('img');
var lk = document.createElement('img');
var bz = document.createElement('img');
// big.appendChild(document.createTextNode(' '));
div.appendChild(big);
div.appendChild(small);
div.appendChild(celiang);
div.appendChild(lk);
div.appendChild(bz);
div.style.borderRight = 'solid 1px #c4c7cc';
div.style.borderTop = 'solid 1px #c4c7cc';
div.style.borderBottom = 'solid 1px #c4c7cc';
div.style.height = '24px';
div.style.background = '#fff';
div.style.fontSize = '13px';
div.style.color = '#000';
div.style.textAlign = 'center';
div.style.lineHeight = '24px';
// big.style.borderRight = 'dashed 1px #c4c7cc';
big.style.display = 'inline-block';
big.style.cursor = "pointer";
big.style.width = '60px';
big.style.height = '24px';
big.src = 'images/map/放大.png';
big.style.borderRight = '1px solid #c4c7cc';
big.style.marginRight = '9px';
small.style.cursor = "pointer";
small.style.borderRight = '1px solid #c4c7cc';
small.style.display = 'inline-block';
small.style.width = '60px';
small.style.height = '24px';
small.src = 'images/map/缩小.png';
small.style.marginRight = '5px';
celiang.style.cursor = "pointer";
celiang.style.display = 'inline-block';
celiang.style.borderRight = '1px solid #c4c7cc';
celiang.style.width = '60px';
celiang.style.height = '24px';
celiang.src = 'images/map/测量.png';
celiang.style.marginRight = '5px';
lk.style.cursor = "pointer";
lk.style.display = 'inline-block';
lk.style.borderRight = 'solid 1px #c4c7cc';
lk.style.width = '60px';
lk.style.height = '24px';
lk.src = 'images/map/定位.png';
lk.style.marginRight = '5px';
bz.style.cursor == 'pointer';
bz.style.display = 'inline-block';
bz.style.width = '60px';
bz.style.height = '24px';
bz.style.marginRight = '5px';
bz.src = 'images/map/标记.png';
// 注册点击事件
big.onclick = function () {
map.zoomTo(map.getZoom() + 2);
};
small.onclick = function () {
map.zoomTo(map.getZoom() - 2);
}
celiang.onclick = function () {
var myDis = new BMapLib.DistanceTool(map);
myDis.open(); // 开启鼠标测距
}
lk.onclick = function () {
// 添加带有定位的导航控件
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true
});
map.addControl(navigationControl);
// 添加定位控件
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess", function (e) {
// 定位成功事件
var address = '';
address += e.addressComponent.province;
address += e.addressComponent.city;
address += e.addressComponent.district;
address += e.addressComponent.street;
address += e.addressComponent.streetNumber;
alert("当前定位地址为：" + address);
});
geolocationControl.addEventListener("locationError", function (e) {
// 定位失败事件
alert(e.message);
});
map.addControl(geolocationControl);
}
bz.onclick = function () {
function showInfo(e) {
//alert(e.point.lng + ", " + e.point.lat);
var point = new BMap.Point(e.point.lng, e.point.lat);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
//marker.setAnimation(BMAP_ANIMATION_BOUNCE);
var label = new BMap.Label("我的标记", { offset: new BMap.Size(20, -10) });
marker.setLabel(label);
var removeMarker = function (e, ee, marker) {
map.removeOverlay(marker);
}
var markerMenu = new BMap.ContextMenu();
markerMenu.addItem(new BMap.MenuItem('删除', removeMarker
.bind(marker)));
marker.addContextMenu(markerMenu);
}
map.addEventListener("click", showInfo);
}
// 添加控件到地图
map.getContainer().appendChild(div);
return div;
};
// 添加自定义控件到地图
var myZoomControl = new ZoomControl();
map.addControl(myZoomControl);
}
</script>
