极客观点
项目管理
HarmonyOS
需求：获取当前位置，并且当我点击自定义的点标记（自行车）时，出现信息窗口，信息窗口自定义导航按钮，点击导航按钮之后，当前位置与点标记位置形成路径规划。（点标记为多个）。
问题：1.信息窗口的导航按钮点击事件不生效，如果写成行内报错 2.点击当前按钮生成路径规划，当我点击下一个点标记的按钮时候，上一次的路径规划不能移除（想要重新规划）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title></title>
<style>
html,body{
width:100%;
height:100%;
}
#container{
height:100%;
}
</style>
<div id="container"></div>
</head>
<body>
<script>
var bike=[
[125.331101,43.894914,'人民广场'],
[125.330957,43.905879,'胜利公园'],
[125.306523,43.90115,'西安桥'],
]
</script>
<script src="jquery-2.2.3.min.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=d2lvO1LLLLmwwGSxwQA5TofYC6BcLLct"></script>
<script>
var map = new BMap.Map("container",{enableMapClick: false}); // 创建地图实例
var point = new BMap.Point(125.330802,43.917542); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);
var geolocation = new BMap.Geolocation();
// 当前位置信息
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);//当前位置标记
map.panTo(r.point);//移动到当前位置
console.log('您的位置：'+r.point.lng+','+r.point.lat);
// 自定义点标注图片
var myIcon = new BMap.Icon("bike.png",new BMap.Size(20,20),{
anchor: new BMap.Size(8, 10),
imageSize:new BMap.Size(20,20),
});
for(var i=0;i<bike.length;i++){
var
var content='<input onclick="on()" type="button" value="导航">';
// 创建标注
var marker = new BMap.Marker(new BMap.Point(bike[i][0],bike[i][1]),{icon:myIcon});
// 添加标注
map.addOverlay(marker);
// 信息窗口
addWindow(content,marker);
function on(){
console.log(11);
}
}
// 信息窗口
var opts = {
width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
// title : content // 信息窗口标题
}
// 每个点标记绑定点击事件
function addWindow(content,marker){
marker.addEventListener("click",function(e){
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content,opts);
// 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口
// 驾车路线
var start=new BMap.Point(r.point.lng,r.point.lat);//起始点
var end=point;//目标点
//驾车路线
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true},
onMarkersSet:function(res){
console.log(res);
}
});
// driving.search(start, end);
});
}
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
</script>
</body>
</html>
html5