1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. 	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  6.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
  7. 	<style type="text/css">
  8. 	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
  9. 	</style>
  10. 	<title>百度地图API测试</title>
  11. </head>
  12. <body>
  13. 	<div id="allmap"></div>
  14. </body>
  15. </html>
  16. <script type="text/javascript">
  17. 	var map = new BMap.Map("allmap");            // 创建Map实例
  18. 	var pointA = new BMap.Point(113.92983, 22.509397); // 创建点坐标   地址 蛇口沃尔玛
  19. 	var pointB = new BMap.Point(113.942129, 22.522642); //地址 海岸城
  20.  
  21. 	map.centerAndZoom(pointA, 15);
  22. 	map.enableScrollWheelZoom();                 //启用滚轮放大缩小
  23. 	map.addControl(new BMap.NavigationControl());
  24. 	map.addControl(new BMap.ScaleControl());
  25. 	map.addControl(new BMap.OverviewMapControl());
  26. 	//map.setCurrentCity("北京"); // 设置当前城市信息
  27. 	/*
  28.      *  给地图添加监控 获取当前点击经纬度
  29. 	    map.addEventListener("click", function(e){
  30. 	    alert(e.point.lng + ", " + e.point.lat);
  31. 	    });
  32. 	*/
  33.  
  34. 	addMarker(pointA, "蛇口沃尔玛", "地址：工业大道和东滨路交汇处<br/>电话：(0755)26816711");        // 创建标注1
  35. 	addMarker(pointB, "海岸城购物中心", "地址：文心五路33号海岸城东座212号<br/>电话：(0755)86125888");        // 创建标注2  
  36.  
  37. 	//开始测距
  38. 	var polyline = new BMap.Polyline([pointA, pointB], { strokeColor: "orange", strokeWeight: 6, strokeOpacity: 0.5 });  //定义折线
  39. 	map.addOverlay(polyline);     //添加折线到地图上
  40. 	polyline.addEventListener("click", function () {    //监听标注事件
  41. 	    alert('从蛇口沃尔玛到海岸城购物中心的距离是：' + (map.getDistance(pointA, pointB)).toFixed(2) + ' 米。');  //获取两点距离,保留小数点后两位
  42. 	});
  43.  
  44. 	//获取驾车路线
  45. 	//var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true} });
  46. 	//driving.search(pointA, pointB);
  47.  
  48. 	// 编写自定义函数,创建标注
  49. 	function addMarker(point, a, b) {
  50. 	    var marker = new BMap.Marker(point);
  51. 	    map.addOverlay(marker);
  52. 	    //map.removeOverlay(marker);                  // 将标注从地图中移除
  53. 	    //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
  54. 	    marker.addEventListener("click", function () {    //监听标注事件
  55. 	        var opts = {    //创建信息窗口
  56. 	            width: 250,     // 信息窗口宽度
  57. 	            height: 100,     // 信息窗口高度
  58. 	            title: a  // 信息窗口标题
  59. 	        }
  60. 	        var infoWindow = new BMap.InfoWindow(b, opts);  // 创建信息窗口对象
  61. 	        map.openInfoWindow(infoWindow, point);      //打开信息窗口
  62. 	        //alert("marker的位置是" + p.lng + "," + p.lat);
  63. 	    });
  64. 	}
  65. </script>

百度地图JS调用示例的更多相关文章

  1. HTML 百度地图API调用示例源码

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 百度地图 js 调用

    百度地图key 的获取 进入 http://lbsyun.baidu.com/i 登录你的账号 点击进入控制台,复制 ak 的值 <!doctype html> <html> ...

  3. Java web与web gis学习笔记（二）——百度地图API调用

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  4. 百度地图--JS版

    百度地图JS版本 ----选择关键字地图展示对应地址---- CSS body, html { width: %; height: %; margin: ; font-family: "微软 ...

  5. 外部引入的js 判断js脚本加载是否完成，完成后执行 相应的动作(以引入百度地图js为例)

    可以使用JQuery的 $.getScript(url,function(){});方法 $.getScript("http://api.map.baidu.com/getscript?v= ...

  6. Winform调用百度地图接口简单示例

    1.首先用一个html文件调用百度地图接口(主要注册一个序列号):   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  7. 百度地图js小结

    1.获取javascript API 服务方法,首先申请密钥(ak),才可成功载入APIJS文件. 用法例如以下: <script type="text/javascript" ...

  8. [deviceone开发]-百度地图do_BaiduMap的示例

    一.简介 这个示例展示了百度地图的基本使用,并增加了一个自定义弹出的标示.这个标示是一个自定义的label,里面是地点的文字描述.因为这个组件需要根据应用app的包名去申请不同的key,所以提供一个可 ...

  9. 百度地图js根据经纬度定位和拖动定位点

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

随机推荐

  1. Vue组件库的那些事儿，你都知道吗？

    前段时间一直在研究Vue组件库,终于在组内派上了用场.来给大家贡献一篇关于Vue组件库的相关知识.经验不多,如果有不合理的地方还请多多指出哦--- 回想一下,在你们公司或者你们小组是否有一个以上的项目 ...

  2. JSON与String之间互转

    一,String转json 这个JSON.parse()与eval()都可以实现,但是它们是有区别的, JSON.parse对json字符串要求比eval()更为严格,key名称(例如name)全部必 ...

  3. 转：【Java并发编程】之二十二：并发新特性—障碍器CyclicBarrier（含代码）

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17512983 CyclicBarrier(又叫障碍器)同样是Java5中加入的新特性,使用 ...

  4. 转：java获得当前文件路径

    第一种: File f = new File(this.getClass().getResource("/").getPath()); System.out.println(f); ...

  5. 软件工程——构建之法高分Tips

    不想获得高分的学生不是好程序猿,结合助教的经验,要想在这门课程上获得高分先提几个Tips 仔细阅读作业要求,尽可能完成作业的每个点 每次老师作业要求布置的都很详细,想获得高分的同学应该仔细阅读作业要求 ...

  6. 201521123111《Java程序设计》第7周学习总结

    1. 本章学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 线性表,栈,队列,哈希表是常用的数据结构 在java.util包中有这些数据结构的实现类.比如:List接口,实现类Arra ...

  7. 201521123103 《Java学习笔记》 第五次学习总结

    一.本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. (1).接口更灵活.更方便,可以方便的为现有的系统添加新的功能. (2).is-a ...

  8. 201521123067 《Java程序设计》第4周学习总结

    201521123067 <Java程序设计>第4周学习总结 1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. ●总结: (1)在 ...

  9. VBScript中InStr函数的用法

    InStr([start, ]str1, str2[, compare]) [用途]:返回str2在str1中的位置.匹配成功时,返回值最小值为1,未匹配到时返回0. [参数说明]: start:在s ...

  10. 201521123036 《Java程序设计》第14周学习总结

    本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 书面作业 MySQL数据库基本操作 1.1 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) ...