关于百度地图 的问题
两个问题：百度地图Javascript版API开发。
1.有个右键菜单功能，点击设置起终点。如果右键设置好起点和终点，不能修改，需要选取驾车方案后，才可以再设置，且设置的过程中，地图上保留上次查询的结果。因为代码中判断有起点和终点标注后，菜单函数部分就不操作了，来由自定义的控件来操作；另外，如果没有选择完起点和终点，是可以再选择起点或终点，也可以清除重复的起点或终点。这样设计的主要原因，现在不能够在代码中指定清除驾车查询结果或标注，它们需要传递参数，这个参数是上次的标注对象，所以现在不知道怎么解决这个问题，驾车查询结果要指定清除，需要指定上次查询结果的DrivingRoute对象，所以也没有解决。所以采用的都是清除地图上所有的标注。所以我想指定清除上次标注，不是全部清除，改怎么做？
2.这个代码是直接以html运行的，右键菜单设置完起终点后，再选择驾车方案，地图上出现结果后，是可以再选择起终点的，但是我放到flex客户端项目AIR运行（flex调用本地html文件），右键菜单设置完起终点后，再选择驾车方案，地图上出现结果后，这是右键菜单功能就不能用了，右击没反应，为什么？以上所说的起终点都是右键菜单的，不是搜索栏中的设置，下面是全部代码，图片就不传了。
MXML代码：
<?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 = "C:/Users/Administrator/Adobe Flash Builder 4.6/BaiduMapJsAIR/src/BaiduMapJsAIR.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>百度地图 JavaScript HTML flex
<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>Hello, World</title>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 93.8%;
width: 100%
}
</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=4095d36deb0128e339ec5c9e2c533a21&services=true"></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 startSelect = false;
var endSelect = false;
var flag=false;
var souFlag=false;
var icon;
var mkr;
var icon02;
var mkr02;
var drive;
//自定义起点标注
function start(e) {
icon = new BMap.Icon('startPoint.jpg', new BMap.Size(29, 30));
mkr = new BMap.Marker(e, {
icon : icon
});
}
//自定义终点标注
function end(e) {
icon02 = new BMap.Icon('endPoint.jpg', new BMap.Size(29, 30));
mkr02 = new BMap.Marker(e, {
icon : icon02
});
}
/*初始化地图*/
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 (startSelect == false) {//地图上没有设置起点
map.addOverlay(mkr);
startSelect = true;//标记此时有起点
} else if (startSelect == true)//地图上已有起点
{
if (endSelect == false)//地图上没有终点
{
map.clearOverlays();
map.addOverlay(mkr);
}
}
e1 = mkr.getPosition();
}
}, {
text : '以此为终点',
callback : function(e) {
end(e);//调用自定义终点标注方法
if (endSelect == false) {//地图上没有设置终点
map.addOverlay(mkr02);
endSelect = true;//标记此时有终点
} else if (endSelect == true)//地图上已有终点
{
if (startSelect == false)//地图上没有起点
{
map.clearOverlays();
map.addOverlay(mkr02);
}
}
e2 = mkr02.getPosition();
}
}, {
text : '距离的测量',
callback : function() {
map.clearOverlays();//清除上次测量
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="";
if(souFlag==true){
map.clearOverlays();
}
if (startSelect == true && endSelect == true||flag==true) {
drive = new BMap.DrivingRoute(map, {
renderOptions : {
map : map,
panel : 'panel',
autoViewport : true,
},
policy : BMAP_DRIVING_POLICY_LEAST_DISTANCE
//选择最短距离作为驾车方案
});
map.clearOverlays();
startSelect = false;
endSelect = false;
flag=true;
drive.search(e1, e2);
} else if (startSelect == true && endSelect == false) {
alert("请选择终点");
} else if (startSelect == false && endSelect == true) {
alert("请选择起点");
} else {
alert("请右键设置起点和终点");
}
}
map.getContainer().appendChild(div);// 添加DOM元素到地图中
return div;
}
/*自定义驾车最少时间控件*/
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="";
if(souFlag==true){
map.clearOverlays();
}
if (startSelect == true && endSelect == true||flag==true) {
var drive = new BMap.DrivingRoute(map, {
renderOptions : {
map : map,
panel : 'panel',
autoViewport : true,
},
policy : BMAP_DRIVING_POLICY_LEAST_TIME
//选择最少时间作为驾车方案
});
map.clearOverlays();
startSelect = false;
endSelect = false;
flag=true;
drive.search(e1, e2);
} else if (startSelect == true && endSelect == false) {
alert("请选择终点");
} else if (startSelect == false && endSelect == true) {
alert("请选择起点");
} else {
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();
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图)
}
//查询公交路线
function gongJiao() {
map.clearOverlays();//清除地图上的覆盖物（上次查询结果）
document.getElementById("text").value="";
//清除右键菜单起终点查询结果
startSelect=false;
endSelect=false;
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("text").value="";
startSelect=false;
endSelect=false;
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="jiache();"
style="margin-left: 0px; margin-top: 6px; height: 22px; width: 47px" />
<div id="container"></div>
<div id="panel" style="left: 650px; top: 40px"></div>
</body>
</html>
[解决办法]
逻辑不需要这么复杂吧，起止点应该可以随意设置，只要定义两个变量记录起止点，保证只有一个起点一个终点就可以了。
像这样，在script中加上两个变量：
var startPoint, endPoint; // 这两个变量记录起止点
菜单改成：
var txtMenuItem = [{
text: '以此为起点',
callback: function (e) {
start(e);//调用自定义起点标注方法
if (startPoint)
map.removeOverlay(startPoint); // 清除原来的起点，如果有的话
map.addOverlay(startPoint = mkr); // 加上新的起点
}
}, {
text: '以此为终点',
callback: function (e) {
end(e);//调用自定义终点标注方法
if (endPoint)
map.removeOverlay(endPoint); // 清楚原来的终点，如果有的话
map.addOverlay(endPoint = mkr02); // 加上新的终点
}
}, {
。。。
}];
div.onclick = function(e) {
if (!startPoint && !endPoint)
alert("请右键设置起点和终点");
else if (!startPoint)
alert("请选择起点");
else if (!endPoint)
alert("请选择终点");
else {
drive = new BMap.DrivingRoute(map, {
renderOptions: {
map: map,
panel: 'panel',
autoViewport: true,
},
policy: BMAP_DRIVING_POLICY_LEAST_DISTANCE //选择最短距离作为驾车方案
});
map.clearOverlays(); // 清楚起止点标记
drive.search(startPoint.getPosition(), endPoint.getPosition()); // 画线路
startPoint = endPoint = null; // 清楚起止点记录变量
}
};
