帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 百度地图操作
百度地图操作
浏览:838次
-
评论:0次
-
发布时间:2017-06-18
Html
Css
Js
body,html { width:100%; height:100%; margin:0; font-family:"微软雅黑"; } #allmap { width:100%; height:500px; overflow:hidden; } #result { width:100%; font-size:12px; } dl,dt,dd,ul,li { margin:0; padding:0; list-style:none; } p { font-size:12px; } dt { font-size:14px; font-family:"微软雅黑"; font-weight:bold; border-bottom:1px dotted #000; padding:5px 0 5px 5px; margin:5px 0; } dd { padding:5px 0 0 5px; } li { line-height:28px; }
// 百度地图API功能 var map = new BMap.Map('map'); //取一个点进行缩放 var poi = new BMap.Point(116.307852, 40.057031); map.centerAndZoom(poi, 16); map.enableScrollWheelZoom(); var overlays = []; var overlaycomplete = function(e) { overlays.push(e.overlay); //覆盖物删除事件 var removeMarker = function(e, ee, overlay) { map.removeOverlay(overlay); } //信息窗口 var info = ""; if (e.overlay instanceof BMap.Polygon) { //var pol=(BMap.Polygon)e.overlay; var poi_arr = e.overlay.getPath(); for (var i = 0; i < poi_arr.length; i++) { info += "坐标" + i + ":经度为" + poi_arr[i].lng + ",纬度为" + poi_arr[i].lat + "\n"; } var infoWindow = new BMap.InfoWindow(info); // 创建信息窗口对象 map.openInfoWindow(infoWindow, poi_arr[0]); //开启信息窗口 //alert(info); } else if (e.overlay instanceof BMap.Marker) { info += "坐标:经度为" + e.overlay.getPosition().lng + ",纬度为" + e.overlay.getPosition().lat + "\n"; var infoWindow = new BMap.InfoWindow(info); // 创建信息窗口对象 map.openInfoWindow(infoWindow, e.overlay.getPosition()); //开启信息窗口 } //创建右键菜单 var markerMenu = new BMap.ContextMenu(); markerMenu.addItem(new BMap.MenuItem('删除', removeMarker.bind(e.overlay))); e.overlay.addContextMenu(markerMenu); }; var styleOptions = { strokeColor: "red", //边线颜色。 fillColor: "red", //填充颜色。当参数为空时,圆形将没有填充效果。 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; } //json初始化多边形覆盖物 var json_data = { "Point": [{ "lng": 116.298438, "lat": 40.054905 }, { "lng": 116.303217, "lat": 40.055126 }, { "lng": 116.303037, "lat": 40.05253 }, { "lng": 116.295743, "lat": 40.053303 }] }; var obj = eval(json_data); //alert(obj.Point[0].lat); //point数组 var point_array = obj.Point; //array初始化多边形覆盖物 /*var point1=new BMap.Point(116.298438,40.054905); var point2=new BMap.Point(116.303217,40.055126); var point3=new BMap.Point(116.303037,40.05253); var point4=new BMap.Point(116.295743,40.053303); var point_array=new Array(); point_array.push(point1); point_array.push(point2); point_array.push(point3); point_array.push(point4);*/ var polygon = new BMap.Polygon(point_array, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 }); map.addOverlay(polygon); var p_arr = polygon.getPath(); var init_info = ""; for (var i = 0; i < p_arr.length; i++) { init_info += "坐标" + i + ":经度为" + p_arr[i].lng + ",纬度为" + p_arr[i].lat + "\n"; } var infoWindow1 = new BMap.InfoWindow(init_info); // 创建信息窗口对象 var point1 = new BMap.Point(obj.Point[0].lng, obj.Point[0].lat); map.openInfoWindow(infoWindow1, point1); //开启信息窗口
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.9.1
<!doctype html><html><head><meta charset="utf-8"><title>百度地图操作-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:拖动地图、画点、圆、折线、多边形、矩形、获取覆盖物个数和清除覆盖物功能
画完多边形和折线,可以双击结束画笔
jQuery九宫格抽奖效果
JS双列表互换
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
838
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值