Flex中调用本地html实现百度地图API Javascript版的一些常用地图功能

最新推荐文章于 2018-01-26 21:59:00 发布
最新推荐文章于 2018-01-26 21:59:00 发布
阅读量2.6k 收藏 4
点赞数
文章标签： 地图 Flex JavaScript HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyxtime/article/details/9823261
版权

功能：公交、驾车和地点搜索框查询，右键菜单在地图上随意选择起终点，选择最短距离或最少时间查询驾车路线，并带有路书功能，还有距离测量功能。搜索框没有进行模糊匹配，不细讲了，见代码吧。(Flex AIR项目)

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
					   xmlns:s="library://ns.adobe.com/flex/spark"
					   xmlns:mx="library://ns.adobe.com/flex/mx"
					   minWidth="1100" minHeight="600">
	<fx:Script>
		<![CDATA[
			import flash.external.ExternalInterface;
			protected function initli():void{
				var url:String = "html文件绝对路径";
				web.location=url;
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<mx:HTML id="web" width="100%" height="100%"/>
	<mx:Button id="button" x="8" y="10" label="打开地图" click="initli()"/>
</s:WindowedApplication>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地图服务</title>
<style type="text/css">
html {
	height: 100%;
}

body {
	height: 100%;
	margin: 0px;
	padding: 0px
}

#container { 
	height: 93.8%;
	width: 80%
}
</style>
<!-- 加载新浪检测用户位置IP API -->
<script
	src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"
	type="text/javascript"></script>
<!--加载百度地图API JS库-->
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=1.5&ak=你的key值=true"></script>
<!-- 加载本地百度地图API路书库，已更改其源代码，使其上方overlay失效 -->
<script type="text/javascript" src="LuShu.js"></script>
<!-- 加载百度地图鼠标绘图工具类库-->
<script type="text/javascript"
	src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
<script type="text/javascript">
	var e1;
	var e2;
	var flag = false;//标记可以进行最短路径和最少时间切换
	var souFlag = false;//标记是否进行了搜索栏的驾车查询
	var icon;
	var mkr;
	var icon02;
	var mkr02;
	var drive;
	var startPoint;
	var endPoint;
	//自定义起点标注
	function start(e) {
		icon = new BMap.Icon('startPoint.jpg', new BMap.Size(29, 30));
		mkr = new BMap.Marker(e, {
			icon : icon,
			offset : new BMap.Size(0, -18)
		//设置偏移量
		});
	}
	//自定义终点标注
	function end(e) {
		icon02 = new BMap.Icon('endPoint.jpg', new BMap.Size(29, 30));
		mkr02 = new BMap.Marker(e, {
			icon : icon02,
			offset : new BMap.Size(0, -18)
		//设置偏移量
		});
	}
	/*初始化地图*/
	function initialize() {
		map = new BMap.Map("container");
		map.setCenter(remote_ip_info["city"]);
		map.centerAndZoom(map.getCenter(), 12);//必须初始化才能进行其他操作
		//var traffic = new BMap.TrafficLayer();  
		//map.addTileLayer(traffic); //添加交通图层
		mapSetting(map);
		var menu = new BMap.ContextMenu();
		var txtMenuItem = [ {
			text : '以此为起点',
			callback : function(e) {
				start(e);//调用自定义起点标注方法
				if (startPoint)
					map.removeOverlay(startPoint); // 清除原来的起点，如果有的话
				map.addOverlay(startPoint = mkr); // 加上新的起点
				e1 = mkr.getPosition();
			}
		}, {
			text : '以此为终点',
			callback : function(e) {
				end(e);//调用自定义终点标注方法
				if (endPoint)
					map.removeOverlay(endPoint); // 清除原来的终点，如果有的话
				map.addOverlay(endPoint = mkr02); // 加上新的终点
				e2 = mkr02.getPosition();
			}
		}, {
			text : '距离的测量',
			callback : function() {
				var myDis = new BMapLib.DistanceTool(map);
				myDis.open();//开启鼠标测距
			}
		} ];
		for ( var i = 0; i < txtMenuItem.length; i++) {
			menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,
					txtMenuItem[i].callback, 100));
			if (i == 1) {
				menu.addSeparator();
			}
		}
		map.addContextMenu(menu);
	}

	/*自定义驾车最短距离控件*/
	function ZoomControlDistance() {
		// 默认停靠位置和偏移量
		this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
		this.defaultOffset = new BMap.Size(67, 40);
	}
	ZoomControlDistance.prototype = new BMap.Control();// 通过JavaScript的prototype属性继承于BMap.Control
	//自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
	//在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
	ZoomControlDistance.prototype.initialize = function(map) {
		var div = document.createElement("div");// 创建一个DOM元素
		div.appendChild(document.createTextNode("最短距离"));// 添加文字说明
		// 设置样式
		div.style.cursor = "pointer";
		div.style.border = "1px solid gray";
		div.style.background = "#E5E5E5";
		div.onclick = function(e) {
			//清除公交和驾车框信息
			document.getElementById("start").value = "";
			document.getElementById("end").value = "";
			document.getElementById("text").value = "";
			var myIcon = new BMap.Icon('che.jpg', new BMap.Size(60, 30));
			if (souFlag == true) {//清除搜索栏公交或驾车查询结果
				map.clearOverlays();
			}
			if (startPoint && endPoint || flag == true) {
				drive = new BMap.DrivingRoute(
						map,
						{
							onSearchComplete : function(results) {
								if (drive.getStatus() == BMAP_STATUS_SUCCESS) {
									var path = results.getPlan(0).getRoute(0)
											.getPath();//获取第一条方案的驾车线路
									var luShu = new BMapLib.LuShu(map, path, {
										speed:30.44,
										icon : myIcon
									});
									luShu.start();
								}
								if (drive.getStatus() == BMAP_STATUS_UNKNOWN_LOCATION) {
									alert("没有查询信息!");
								}
							},
							renderOptions : {
								map : map,
								panel : 'panel',
								autoViewport : true,
							},
							policy : BMAP_DRIVING_POLICY_LEAST_DISTANCE
						//选择最短距离作为驾车方案
						});
				map.clearOverlays(); // 清楚起止点标记
				document.getElementById("panel").style.display = "block";//显示
				drive.search(e1, e2); // 画线路
				startPoint = endPoint = null; // 清除起止点记录变量
				flag = true;
			} else if (!startPoint && !endPoint)
				alert("请右键设置起点和终点");
			else if (!startPoint)
				alert("请选择起点");
			else if (!endPoint)
				alert("请选择终点");
		}
		map.getContainer().appendChild(div);// 添加DOM元素到地图中
		return div;// 将DOM元素返回
	}

	/*自定义驾车最少时间控件*/
	function ZoomControlTime() {
		this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
		this.defaultOffset = new BMap.Size(1, 40);
	}
	ZoomControlTime.prototype = new BMap.Control();
	ZoomControlTime.prototype.initialize = function(map) {
		var div = document.createElement("div");
		div.appendChild(document.createTextNode("最少时间"));
		div.style.cursor = "pointer";
		div.style.border = "1px solid gray";
		div.style.background = "#E3E3E3";
		div.onclick = function(e) {
			//清除公交和驾车框信息
			document.getElementById("start").value = "";
			document.getElementById("end").value = "";
			document.getElementById("text").value = "";
			var myIcon = new BMap.Icon('che.jpg', new BMap.Size(60, 30));
			if (souFlag == true) {
				map.clearOverlays();
			}
			if (startPoint && endPoint || flag == true) {
				drive = new BMap.DrivingRoute(
						map,
						{
							onSearchComplete : function(results) {
								if (drive.getStatus() == BMAP_STATUS_SUCCESS) {
									var path = results.getPlan(0).getRoute(0)
											.getPath();//获取第一条方案的驾车线路
									var luShu = new BMapLib.LuShu(map, path, {
										speed : 30.44,
										icon : myIcon
									});
									luShu.start();
								}
								if (drive.getStatus() == BMAP_STATUS_UNKNOWN_LOCATION) {
									alert("没有查询信息!");
								}
							},
							renderOptions : {
								map : map,
								panel : 'panel',
								autoViewport : true,
							},
							policy : BMAP_DRIVING_POLICY_LEAST_TIME
						//选择最少时间作为驾车方案
						});
				map.clearOverlays(); // 清楚起止点标记
				document.getElementById("panel").style.display = "block";//显示
				drive.search(e1, e2); // 画线路
				startPoint = endPoint = null; // 清除起止点记录变量
				flag = true;
			} else if (!startPoint && !endPoint)
				alert("请右键设置起点和终点");
			else if (!startPoint)
				alert("请选择起点");
			else if (!endPoint)
				alert("请选择终点");
		}
		map.getContainer().appendChild(div);
		return div;
	}

	/*进行地图的一些显示设置和操作*/
	function mapSetting(map) {
		var opts = {
			type : BMAP_NAVIGATION_CONTROL_LARGE,
			offset : new BMap.Size(0, 25)
		//改变控件偏移量
		}
		map.addControl(new BMap.NavigationControl(opts));//显示完整的平移缩放控件
		map.addControl(new BMap.ScaleControl());//添加比例尺
		map.addControl(new BMap.MapTypeControl());//添加地图类型控件
		map.addControl(new BMap.OverviewMapControl());//添加缩略图
		map.setDraggingCursor("pointer");//设置拖拽地图时的鼠标指针样式
		map.enableInertialDragging(true);//启用地图惯性拖拽
		map.enableScrollWheelZoom(true);//启用滚轮放大缩小
		var myZoomCtrl = new ZoomControlDistance();// 创建控件实例
		map.addControl(myZoomCtrl);// 添加到地图当中
		var myZoomCtrlTime = new ZoomControlTime();
		map.addControl(myZoomCtrlTime);
	}

	/*搜索位置*/
	function souSuo() {
		map.clearOverlays();
		document.getElementById("panel").style.display = "none";//隐藏
		document.getElementById("start").value = "";
		document.getElementById("end").value = "";
		var local = new BMap.LocalSearch(map, {//设置显示搜索结果选项
			renderOptions : {
				map : map,
				autoViewport : true,
				selectFirstResult : false
			},
			pageCapacity : 8
		});
		local.search(document.getElementById("text").value);//显示用户搜索的位置
		mapSetting(map);
		map.setCurrentCity(document.getElementById("text").value); //设置该城市的3D图(该城市必须支持3D图)
		startPoint = endPoint = null; //切换到新城市后，清除上次起止点记录变量
		flag = false;
	}

	//查询公交路线
	function gongJiao() {
		map.clearOverlays();//清除地图上的覆盖物（上次查询结果）
		document.getElementById("panel").style.display = "block";//显示
		document.getElementById("text").value = "";
		//清除右键菜单起终点查询结果
		flag = false;
		var transit = new BMap.TransitRoute(map, {
			renderOptions : {
				map : map,
				panel : 'panel',
				autoViewport : true,
			}
		});
		transit.search(document.getElementById("start").value, document
				.getElementById("end").value);
		souFlag = true;//标记已进行公交查询，来进行右键查询时清除其结果
	}

	//查询驾车路线，目前API仅提供一条驾车方案
	function jiaChe() {
		map.clearOverlays();
		document.getElementById("panel").style.display = "block";//显示
		document.getElementById("text").value = "";
		flag = false;
		var driving = new BMap.DrivingRoute(map, {
			renderOptions : {
				map : map,
				panel : 'panel',
				autoViewport : true,
				enableDragging : true
			}
		});
		driving.search(document.getElementById("start").value, document
				.getElementById("end").value);
		souFlag = true;//标记已进行驾车查询，来进行右键查询时清除其结果
	}

	/*捕捉回车事件*/
	document.onkeydown = function(event) {
		e = event ? event : (window.event ? window.event : null);
		if (e.keyCode == 13) {
			souSuo();
		}
	}
</script>
</head>
<body οnlοad="initialize()">
	<input type="text" name="text" id="text"
		style="margin-left: 80px; height: 24px;" />
	<input type="image" name="image" src="sousuo.jpg" οnclick="souSuo();"
		style="margin-left: 0px; margin-top: 6px; height: 22px; width: 47px" />
	<input type="text" name="startPoint" id="start"
		style="margin-left: 220px;" /> 到
	<input type="text" name="endPoint" id="end" style="margin-left: 0px;" />
	<input type="image" name="gongjiao" src="gongjiao.jpg"
		οnclick="gongJiao();"
		style="margin-left: 0px; margin-top: 6px; height: 22px; width: 47px" />
	<input type="image" name="jiache" src="jiache.jpg" οnclick="jiacChe();"
		style="margin-left: 0px; margin-top: 6px; height: 22px; width: 47px" />
	<div id="container"></div>
	<div id="panel"
		style="position: absolute; height: 93.8%; width: 20%; right: 0px; top: 40px; overflow-y: scroll;"></div>
</body>
</html>



yanxing2012
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
2021-09-13
tiantian_ht的博客
09-13 269
控制台报错 ‘BMapLib is not defined’ 解释：使用百度地图，在全局导入BMap情况下，使用BMapLib.LuShu遇到的问题 解决方式： npm i --save bmaplib.lushu 然后在需要使用LuShu的组件vue中导入LuShu，即 import LuShu from 'bmaplib.lushu' new Lushu();取代BMapLib.Lushu();即可使用。 详解见 https://www.npmjs.com/package/bmaplib.lush
Flex 百度地图开发实例
12-04
广大Flash用户，8月5日，由于底图服务升级，需用户升级SWC文件，才能解决各位的地图底图不能显示的问题。 下载8月8日的SWC文件，解决： 1） 各位地图不显示； 2） 卫星图不显示； 3） 自此之后，百度地图底图升级，无需再更换SWC文件，我们会直接同步 PS： 若您8月6日下载过SWC文件更新，请重新下载一份。 由于论坛有积分制度，如果您没有积分下载，请回复此贴获得积分或者直接网盘地址下载均可。 请亲带来的不便，深表抱歉，我们时刻都在努力做到效率，请谅解我们吧！ 各位亲，这大晚上第一时间接到修复的SWC，就忙着上来更新呢！ 另，Flash API自去年8月开始，仅处于维护但不在更新的状态。建议您切换至JavaScript API，享受更多丰富的体验。
百度地图 Flex 和示例程序
03-01
百度地图 Flex 开发包和示例程序，均从网上搜集的
Flex 引用MapABC 地图API
12-23
Flex开发地图程序 小示例 可以缩放地图 取得经纬度点 设置显示的地图中心
Flex 百度地图API使用
weixin_30929011的博客
09-29 140
今天想看一下Flex中关于地图方面的使用，刚开始看了google map api， 感觉用起来挺麻烦，关键是英文不好，文档读起来费劲，还有密钥神马的~ 那我就试验一下百度地图的接口，文档是中文的。 首先下载百度地图的Flash API 地址：http://developer.baidu.com/map/flash.htm (比较蛋疼的是现在谷歌地图、百度地图都不在更新Flash API，都...
MapABC地图API Flash版-JavaScript版-Silverlight版-Flex版.zip
11-15
2. **MapABC地图API JavaScript版**：JavaScript是目前最常用的Web开发语言，其API版本使得地图功能可以直接嵌入HTML页面，无需额外插件。JavaScript版API通常基于WebGL或矢量图形，提供高性能、响应式的用户体验。...
百度地图离线API 2.0(含示例,可完全断网访问)
02-05
由于公司需求,自己修改的离线地图API.该压缩包具有如下功能: 1.支持使用google地图瓦片(不建议使用,效率不高,缩放级别较高时拖动有些卡顿,建议注释该代码块:overlayTileLayer.getTilesUrl,使用google转baidu的jar...
arcgis server FLEX调用百度地图的实现类
07-02
3. **调用百度地图API**：在FLEX的ActionScript代码中，通过`ExternalInterface.call()`方法调用已注册的JavaScript函数，初始化百度地图实例并设置地图属性。 4. **交互操作**：你可以定义更多的接口来实现FLEX与...
基于ArcGIS+Flex+API的校园电子地图研究与实现.pdf
11-20
【ArcGIS Flex API】ArcGIS Flex API是一种由Esri公司提供的客户端开发框架，它允许开发者构建富互联网应用程序（RIA），这些应用程序能够与ArcGIS Server进行交互，提供强大的地图服务和地理处理功能。Flex API结合...
flex 百度地图 实例下载
09-15
在本实例中，我们需要通过HTMLBridge调用百度地图的JavaScript API。 4. **地图显示**：使用百度地图API，可以获取地图瓦片图片，并在Flex应用中展示。需要设置地图中心点、缩放级别以及地图类型（如普通地图、卫星...
arcgis api for flex 开发入门（三）地图浏览控件的使用<转>
weixin_30399797的博客
07-06 75
arcgis api for flex 开发入门（三）地图浏览控件的使用地图浏览包括放大，缩小，漫游，复位，上级窗口，下级窗口等在arcgis api for flex中，esri 已经封装好了一个地图浏览，我们在程序中可以直接使用，只需要几十行代码，就可以完成复杂的任务。首先在上一讲的基础上创建一个Navigation 控件。使用<esri:Navigation>标签就可以了。&lt...
Flex出错记录(持续更新)
timnity的博客
09-25 255
初学Flex，只是业余兴趣，或许以后可以应用在产品开发上。以下记录Flex中自己出现过的错误和解决。许多错误都很低级，望"高手""熟手"无视，勿骂 [b]一、[/b]mxml的标签区分大小写 mxml就是一xml，当然要区分大小写的，如果不小心写错，编译时会报 [quote] Error: Could not resolve to a component implementat...
ArcGIS Flex API 调用天地图和Google地图服务
lxping1012的专栏
04-12 1万+
Esri为我们提供了TiledMapServiceLayer类，这个类正是所有瓦片地图服务都必须继承的类，像ArcGISTiledMapServiceLayer, OpenStreetMapLayer, VETiledLayer等esri提供的瓦片类都是继承了该类的，所以我们要扩展该TiledMapServiceLayer类 一.调用天地图服务（SXGeoTileLayer类） impo
Arcgis for flex 调用百度地图与Google地图
11-06 3414
调用百度地图的ActionScripts脚本是用的网上一位“GIS大奔”的博客。 链接：http://www.gisall.com/html/72/124272-6284.html 百度地图API http://dev.baidu.com/wiki/static/index.htm 这调用百度地图和Google地图相差无几，只是坐标和几级的算法不一样的。这是GoogleMap 例子： packag
ArcGIS Server FLEX API调用百度地图实现技术
小小的天空
07-02 6567
调用百度地图的ActionScripts脚本是用的网上一位“GIS大奔”的博客，在网上查到以后，拷下来，安装好FLESH BUILDER 4独立版，下载ArcGIS server FIEX API 2.0安装上，写一个调用脚本的MXML，就成功地调到了百度地图。用了差不多1天时间吧，之前没有做过FLEX，但是对AE挺熟。虽然成功调到图了，由于前面那位大牛只共享了代码，没有说明实现的原理，不明所以也
web前端PC端 百度地图的开发指导
热门推荐
xinxiaoyong的博客
01-12 2万+
先看效果图片： 最终效果描述： 1.搜索：有搜索提示，并且可以根据选择进行定位； 2.获取经纬度：点击地图中某点，在文本框中获取当前点的经纬度的值； 3.获取详细地址：点击地图中某点时，将该点的详细地址 显示在文本框中； 4.支持鼠标滚轮控制地图缩放； 5.支持比例尺控件； 6.支持城市列
arcgis flex 地图开发入门实践（适合完全不懂的）
buhaoyisiwoyao的博客
07-28 1992
arcgis flex 地图 入门
HTML5+百度地图API实现地理定位
人人都懂物联网
01-26 7599
背景 　　如果知道用户在哪里，往往会提高很多Web应用的体验，比如为用户指明方向，对它们要去的地方给出建议，让用户知道它们所在的区域内有哪些人可能会对某个活动感兴趣等等。现在，利用HTML5（以及基于JavaScript的地理定位API），可以使我们很容易地在页面中访问位置信息！ 地理定位不算是现有HTML5标准的“直系”成员，不过，它确实是W3C的一个标准，得到了广泛的支持，而且几乎所
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值