百度地图DEMO-路线导航，测距，标点
<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-路线导航，测距，标点的更多相关文章
- Android studio百度地图demo出现230错误，key校验失败
转自daoxiaomianzi原文 Android studio 百度地图demo出现230错误,key校验失败 使用AndroidStudio导入Baidu地图的as版的demo,引入后,发现没有k ...
- 将百度地图Demo抽取出来安到自己的程序中
今日所学: 使用百度地图ADK实现手机定位 [Android]使用百度.高德.腾讯地图SDK获取定位数据与屏幕截图分享到QQ_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili 代码获取SHA1 (2 ...
- Android 百度地图API 定位 导航
看看这个利用百度地图定位并实现目的地导航的Demo. 首先看实现效果: 进 入后首先会得到当前位置,在地图上显示出来.在输入框中输入目的地后,就会在地 ...
- Android学习笔记之使用百度地图实现路线规划+公交信息检索
PS:装了个deepin,感觉真的很高大上. 学习内容: 1.公交信息检索 2.路线规划 关于百度地图的开发也就这么多了.重要的部分也就那么些.原本打算搞到poi搜索就算了,不过看到了这两个方面还 ...
- 百度地图 - demo
项目需要集成百度地图,那么关于如何集成百度地图的事,就自己去百度开放平台查看文档吧,这是非常简单的事,在这里就不多说了. 那么下面我就说说我在这个demo里所做的事. 首先,项目需要具备定位及计算两地 ...
- H5微信通过百度地图API实现导航方式一
根据业务需求修改百度API,实现微信中的导航功能.因为源码中SearchInfoWindow_min.js有点小问题(部分小城市公交线路少,查不到路线时没有提示),所以这里在源码的基础上改了一点点.可 ...
- 使用百度地图开发一个导航定位demo-android学习之旅(77)
首先介绍如何导入百度地图 步骤(其实官方文档写的很清楚了)http://developer.baidu.com/map/index.php?title=androidsdk/guide/introdu ...
- 【Android接百度地图API】百度地图Demo点击按钮闪退
运行百度地图自带的BaiduMap_AndroidSDK_v4.1.0_Sample里面的BaiduMapsApiASDemo发现点击上面的按钮会闪退,控制台报的是xml的问题 查了一下,官方文档特别 ...
- H5微信通过百度地图API实现导航方式二
要有服务器才行哦 <!DOCTYPE html><html><head> <meta http-equiv="Content-Type&quo ...
- android 百度地图demo 随感
最近项目组的老大要我对百度的android的sdk进行一段的预研,由于技术太菜,出了不少的错误,因此有一点感悟了. 嗨,这个错误浪费了我一天的时间的时候,我按照百度的技术文档一步步的来做,每部基本上都 ...
随机推荐
- 【递推】Bzoj3612[Heoi2014]平衡
Description 下课了,露露.花花和萱萱在课桌上用正三棱柱教具和尺子摆起了一个“跷跷板”. 这个“跷跷板”的结构是这样的:底部是一个侧面平行于地平面的正三棱柱教具, 上面 摆着一个尺 ...
- BZOJ_1923_[Sdoi2010]外星千足虫_高斯消元+bitset
BZOJ_1923_[Sdoi2010]外星千足虫_高斯消元 Description Input 第一行是两个正整数 N, M. 接下来 M行,按顺序给出 Charles 这M次使用“点足机”的统计结 ...
- BZOJ_3343_教主的魔法_分块+二分查找
BZOJ_3343_教主的魔法_分块+二分查找 题意:教主最近学会了一种神奇的魔法,能够使人长高.于是他准备演示给XMYZ信息组每个英雄看.于是N个英雄们又一次聚集在了一起,这次他们排成了一列被编号为 ...
- jquery 判断一个元素是否在数组中 $.inarry()使用
需要判断一个元素是否在一个数组里: js indexOf()方法 如果存在 则返回该元素的下标值 如果不存在则返回-1 学习源头: http://www.w3school.com.cn/jsref/ ...
- selenium+python，解决selenium弹出新页面，无法定位元素的问题（报错：Unable to locate element:元素）
1.问题发生描述: 从一个页面进行点击等操作,页面跳转到第二个页面,对第二个页面中的元素,采取任何措施定位都报错,问题报错点如下: 2.出现问题的原因: 窗口句柄还停留在上一个页面,对于当前新弹出的页 ...
- node.js与ThreadLocal
ThreadLocal变量的说法来自于Java,这是在多线程模型下出现并发问题的一种解决方案. ThreadLocal变量作为线程内的局部变量,在多线程下可以保持独立,它存在于 线程的生命周期内,可以 ...
- Python-字符版gif图
一.背景 上一篇文章我们讲了怎么做自己的炫酷二维码,需要的移驾Python-炫酷二维码,本片文章我们讲述下怎么把一张图片处理成字符版图片,就是说使用字符替代每个像素的颜色,形成一个由字符组成的图片,并 ...
- 用Docker解决坑爹的环境搭建系列——PHP+Apache2
sudo docker pull eboraas/apache-php sudo docker run -p 9991:80 --name php -v /data/docker/php/www:/v ...
- 《k8s-1.13版本源码分析》-调度优选
源码分析系列文章已经开源到github,地址如下: github:https://github.com/farmer-hutao/k8s-source-code-analysis gitbook:ht ...
- 也谈Reactor模式
何谓Reactor模式?它是实现高性能IO的一种设计模式.网上资料有很多,有些写的也很好,但大多不知其所以然.这里博主按自己的思路简单介绍下,有不对的地方敬请指正. BIO Java1.4(2002年 ...