<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>全插件</title>

<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=yzmcuroeXsnCGNAjnAtvUp9Xh8eXcrTm&services=&t=20180823194355"></script>

<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>

</head>

<body>

<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>

<input type="button" value="开启测距" onclick="myDis.open();" />

<input type="button" value="关闭测距" onclick="myDis.close()" />

<div id="results" style="font-size:13px;margin-top:10px;"></div>

</body>

</html>

<script type="text/javascript">

//map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件

//map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT}));//地图|卫星|三维 控件

//map.setCurrentCity("济南");

//百度map API  http://dev.baidu.com/wiki/static/map/API/examples/?v=1.3&3_0#3&0

var map = new BMap.Map("container");          // 创建Map实例

var point = new BMap.Point(117.025, 36.666);  // 创建点坐标

var myDis = new BMapLib.DistanceTool(map);   //测距插件

map.centerAndZoom(point,13);                  // 初始化地图,设置中心点坐标和地图级别。

map.enableScrollWheelZoom();                  // 启用滚轮放大缩小。

map.enableKeyboard();                         // 启用键盘操作。

map.addControl(new BMap.ScaleControl());         // 添加比例尺控件

map.addControl(new BMap.OverviewMapControl());   //添加缩略地图控件

var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL} // 添加平移缩放控件(个性化)

map.addControl(new BMap.NavigationControl(opts));// 添加平移缩放控件(个性化)

map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));//地图|混合 控件

//=======================================

var contextMenu = new BMap.ContextMenu();//创建右键对象

var txtMenuItem = [

  { text:'折线测距',callback:function(){myDis.open()}},

  { text:'在此添加标注',

   callback:function(p){

    var marker = new BMap.Marker(p), px = map.pointToPixel(p);

    map.addOverlay(marker);

   }

  }

 ];

for(var i=0; i < txtMenuItem.length; i++){

 contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));

 if(i==1 || i==3) {

  contextMenu.addSeparator();

 }

}

map.addContextMenu(contextMenu);

//===================开始 结束 测距 start===================

var transit = new BMap.DrivingRoute(map, {

  renderOptions: {map: map,panel: "results", autoViewport: true},

  onMarkersSet: function(pois){

   var start = pois[0].marker, end = pois[1].marker;

   start.enableDragging();//开启起点拖拽功能

   end.enableDragging();//开启终点拖拽功能

   start.addEventListener("dragend",function(e){

    map.clearOverlays();

    transit.search(e.point,end.getPosition());

   });

   end.addEventListener("dragend",function(e){

    map.clearOverlays();

    transit.search(start.getPosition(),e.point);

   });

  }

});

transit.search("南京南站","南京站");

//===================开始 结束 测距 end  ===================

 //默认红色标注

//var marker = new BMap.Marker(new BMap.Point(116.987, 36.666));  // 创建标注

//map.addOverlay(marker);              // 将标注添加到地图中

//var myPushpin = new BMap.PushpinTool(map);          // 创建标注工具实例

//myPushpin.addEventListener("markend", function(e){  // 监听事件，提示标注点坐标信息

// alert("您标注的位置："+e.marker.getPoint().lng+","+e.marker.getPoint().lat);//获取坐标

// alert("您标注的位置："+e.point.lng+","+e.point.lat);//另一种获取坐标

//});

//myPushpin.open();     

//var myP1 = new BMap.Point(117.025, 36.666);    //起点

//var myP2 = new BMap.Point(117, 36.666);    //终点

//var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});    //驾车实例

//driving2.search(myP1, myP2);    //显示一条公交线路

//创建小狐狸

//var pt = new BMap.Point(116.991, 36.666);

//var myIcon = new BMap.Icon("http://dev.baidu.com/wiki/static/map/API/img/fox.gif", new BMap.Size(300,157));

//var marker = new BMap.Marker(pt,{icon:myIcon});  // 创建标注

//map.addOverlay(marker);              // 将标注添加到地图中

//让小狐狸说话（创建信息窗口）

//var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>哈哈，你看见我啦！我可不常出现哦！</p>");

//marker.addEventListener("click", function(){this.openInfoWindow(infoWindow);});

//marker.enableDragging(true); // 设置标注可拖拽

</script>

效果

百度地图DEMO-路线导航，测距，标点的更多相关文章

  1. Android studio百度地图demo出现230错误，key校验失败

    转自daoxiaomianzi原文 Android studio 百度地图demo出现230错误,key校验失败 使用AndroidStudio导入Baidu地图的as版的demo,引入后,发现没有k ...

  2. 将百度地图Demo抽取出来安到自己的程序中

    今日所学: 使用百度地图ADK实现手机定位 [Android]使用百度.高德.腾讯地图SDK获取定位数据与屏幕截图分享到QQ_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili 代码获取SHA1 (2 ...

  3. Android 百度地图API 定位 导航

    看看这个利用百度地图定位并实现目的地导航的Demo. 首先看实现效果:                          进 入后首先会得到当前位置,在地图上显示出来.在输入框中输入目的地后,就会在地 ...

  4. Android学习笔记之使用百度地图实现路线规划+公交信息检索

    PS:装了个deepin,感觉真的很高大上. 学习内容: 1.公交信息检索 2.路线规划   关于百度地图的开发也就这么多了.重要的部分也就那么些.原本打算搞到poi搜索就算了,不过看到了这两个方面还 ...

  5. 百度地图 - demo

    项目需要集成百度地图,那么关于如何集成百度地图的事,就自己去百度开放平台查看文档吧,这是非常简单的事,在这里就不多说了. 那么下面我就说说我在这个demo里所做的事. 首先,项目需要具备定位及计算两地 ...

  6. H5微信通过百度地图API实现导航方式一

    根据业务需求修改百度API,实现微信中的导航功能.因为源码中SearchInfoWindow_min.js有点小问题(部分小城市公交线路少,查不到路线时没有提示),所以这里在源码的基础上改了一点点.可 ...

  7. 使用百度地图开发一个导航定位demo-android学习之旅(77)

    首先介绍如何导入百度地图 步骤(其实官方文档写的很清楚了)http://developer.baidu.com/map/index.php?title=androidsdk/guide/introdu ...

  8. 【Android接百度地图API】百度地图Demo点击按钮闪退

    运行百度地图自带的BaiduMap_AndroidSDK_v4.1.0_Sample里面的BaiduMapsApiASDemo发现点击上面的按钮会闪退,控制台报的是xml的问题 查了一下,官方文档特别 ...

  9. H5微信通过百度地图API实现导航方式二

    要有服务器才行哦 <!DOCTYPE html><html><head>    <meta http-equiv="Content-Type&quo ...

  10. android 百度地图demo 随感

    最近项目组的老大要我对百度的android的sdk进行一段的预研,由于技术太菜,出了不少的错误,因此有一点感悟了. 嗨,这个错误浪费了我一天的时间的时候,我按照百度的技术文档一步步的来做,每部基本上都 ...

随机推荐

  1. Windows上安装配置SSH教程（7）——几种方式对比

    服务端:Windows XP 客户端:Windows 10 由于Cygwin也可以安装OpenSSH,所以客户端其实可以直接使用Cygwin安装OpenSSH,那么在Windows下使用SCP(安全拷 ...

  2. 浅谈.Net异步编程的前世今生----APM篇

    前言 在.Net程序开发过程中,我们经常会遇到如下场景: 编写WinForm程序客户端,需要查询数据库获取数据,于是我们根据需求写好了代码后,点击查询,发现界面卡死,无法响应.经过调试,发现查询数据库 ...

  3. 微信小程序保存图片到相册

    先来看小程序中的保存图片到相册的api wx.saveImageToPhotosAlbum({ filePath : "./test.png", //这个只是测试路径,没有效果 s ...

  4. 【STM32H7教程】第12章 STM32H7的HAL库框架设计学习

    完整教程下载地址:http://forum.armfly.com/forum.php?mod=viewthread&tid=86980 第12章       STM32H7的HAL库框架设计学 ...

  5. Emmagee--APP性能测试工具的基本使用

    一.Emmagee介绍 Emmagee是监控指定被测应用在使用过程中占用机器的CPU.内存.流量资源的性能测试小工具.该工具的优势在于如同windows系统性能监视器类似,它提供的是数据采集的功能,而 ...

  6. C#调用Python脚本打印pdf文件

     介绍:通过pdf地址先将文件下载到本地,然后调用打印机打印,最后将下载的文件删除. 环境:windows系统.(windows64位) windows系统中安装python3.6.2环境 资料: O ...

  7. 七牛云免费对象存储，并绑定到cloudreve中

    之前开通了腾讯云的对象存储COS并使用中,不过之前主要将它当作云盘使用,这两天再做博客系统时发现也可以将它作为网站的图库,这样对网站的访问效率也会提高. 今天了解到七牛云有免费的对象存储可以使用,于是 ...

  8. MySQL之父造访腾讯云 为腾讯云数据库开源点赞

    近日,技术大牛 MariaDB 公司创始人兼CTO Michael Widenius(又名Monty).MariaDB 基金会主席 Kaj 来到中国,针对MariaDB与腾讯云的技术合作进行回访.去年 ...

  9. Element-ui使用技巧

    使用第三方字体包 把下载后的*.zip字体包放到项目中在main.js中引用. import "@/assets/font/iconfont.css"; 注意一定要放到elemen ...

  10. spark集群搭建整理之解决亿级人群标签问题

    最近在做一个人群标签的项目,也就是根据客户的一些交易行为自动给客户打标签,而这些标签更有利于我们做商品推荐,目前打上标签的数据已达5亿+, 用户量大概1亿+,项目需求就是根据各种组合条件寻找标签和人群 ...