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

来源：互联网发布：js audio事件编辑：程序博客网时间：2024/05/16 08:43

功能：公交、驾车和地点搜索框查询，右键菜单在地图上随意选择起终点，选择最短距离或最少时间查询驾车路线，并带有路书功能，还有距离测量功能。搜索框没有进行模糊匹配，不细讲了，见代码吧。(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 --><scriptsrc="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 onload="initialize()"><input type="text" name="text" id="text"style="margin-left: 80px; height: 24px;" /><input type="image" name="image" src="sousuo.jpg" onclick="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"onclick="gongJiao();"style="margin-left: 0px; margin-top: 6px; height: 22px; width: 47px" /><input type="image" name="jiache" src="jiache.jpg" onclick="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>