Flex中调用本地html实现百度地图API Javascript版的一些常用地图功能
功能：公交、驾车和地点搜索框查询，右键菜单在地图上随意选择起终点，选择最短距离或最少时间查询驾车路线，并带有路书功能，还有距离测量功能。搜索框没有进行模糊匹配，不细讲了，见代码吧。(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 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>
