百度地图JS调用示例
2015-08-18 16:43
621 查看
<!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" /> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <title>百度地图API测试</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> var map = new BMap.Map("allmap"); // 创建Map实例 var pointA = new BMap.Point(113.92983, 22.509397); // 创建点坐标 地址 蛇口沃尔玛 var pointB = new BMap.Point(113.942129, 22.522642); //地址 海岸城 map.centerAndZoom(pointA, 15); map.enableScrollWheelZoom(); //启用滚轮放大缩小 map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl()); //map.setCurrentCity("北京"); // 设置当前城市信息 /* * 给地图添加监控 获取当前点击经纬度 map.addEventListener("click", function(e){ alert(e.point.lng + ", " + e.point.lat); }); */ addMarker(pointA, "蛇口沃尔玛", "地址:工业大道和东滨路交汇处<br/>电话:(0755)26816711"); // 创建标注1 addMarker(pointB, "海岸城购物中心", "地址:文心五路33号海岸城东座212号<br/>电话:(0755)86125888"); // 创建标注2 //开始测距 var polyline = new BMap.Polyline([pointA, pointB], { strokeColor: "orange", strokeWeight: 6, strokeOpacity: 0.5 }); //定义折线 map.addOverlay(polyline); //添加折线到地图上 polyline.addEventListener("click", function () { //监听标注事件 alert('从蛇口沃尔玛到海岸城购物中心的距离是:' + (map.getDistance(pointA, pointB)).toFixed(2) + ' 米。'); //获取两点距离,保留小数点后两位 }); //获取驾车路线 //var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true} }); //driving.search(pointA, pointB); // 编写自定义函数,创建标注 function addMarker(point, a, b) { var marker = new BMap.Marker(point); map.addOverlay(marker); //map.removeOverlay(marker); // 将标注从地图中移除 //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 marker.addEventListener("click", function () { //监听标注事件 var opts = { //创建信息窗口 width: 250, // 信息窗口宽度 height: 100, // 信息窗口高度 title: a // 信息窗口标题 } var infoWindow = new BMap.InfoWindow(b, opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow, point); //打开信息窗口 //alert("marker的位置是" + p.lng + "," + p.lat); }); } </script>
相关文章推荐
- js中对Ajax使用解析与重构
- javascript函数 第14节
- JS学习十九天----组合模式
- Javascript实现瀑布流
- Javascript中的DOM实现显示鼠标的空间位置
- js实现带有介绍的Select列表菜单实例
- javascript学习笔记(一)-廖雪峰教程
- pjsip_iphone(1)初探
- javascript 模式(2)——单例模式
- js 个人整理的兼容性代码
- javascript +.net 构建restful API 应用
- JSON技术-Gson将bean转换json确保数据的正确,使用FastJson将Json转换Bean
- javascript 基础3第13节
- 读 《你不知道的javascript》 思维脑图
- 关于js中alert弹出框乱码问题
- 转帖:深入理解JavaScript系列
- js新手引导
- js简单实现表单中点击按钮动态增加输入框数量的方法
- JS中window.document对象
- js对象序列化JSON.stringify()与反序列化JSON.parse()