百度地图api - 右键功能开发

在百度地图api中，右键的开发只做了2中介绍，分别是地图的放大和缩小，下面要和大家分享的是右键打点，寻找路线，以及地图居中的功能

 

var satrtMark = []; //存放起点mark的数组
var endMark = []; //存放终点mark的数组

 

// 为什么要放用一个数组来存放终点和起点呢? 大家都知道，终点和起点只能有一个是吧?太多了就不能规划路线了，这不符合逻辑，所有用数组来存放点，让点只能有一个

var menu = new BMap.ContextMenu();
var txtMenuItem = [
{
text:'<p style="font-size:12px;padding-top:3px;">以此为起点</p>',callback:function(){   //  创建起点
　　var poi = new BMap.Point(rightclickPoint.lng, rightclickPoint.lat); //获取右键单击时的坐标
　　// $("#startPoint").val(rightclickPoint.lng + "," + rightclickPoint.lat); //将标注存放到作用域,   这里是一个隐藏域,用来存放起点坐标的，在规划路线的时候要判断起点坐标和终点坐标
　　var marker = new BMap.Marker(poi);
　　var icons = MAT_HOST + "/public/images/startPoint.png";  //这个是自定义图片的地址,因为用百度地图api打出的点是默认的一个红色标注，所有在一定的情况下我们需要自定义标注
　　var icon = new BMap.Icon(icons, new BMap.Size(29, 31));  //size是图片的高度和宽度
　　marker.setIcon(icon);
　　if(satrtMark.length >= 1){   //  在这里就是判断起点是否存在
　　　　for(var i=0; i<satrtMark.length; i++){
　　　　map.removeOverlay(satrtMark[i]);
　　}
　　　map.addOverlay(marker);
        satrtMark.push(marker);  // 打点之后存放到数组，用来判断是否
　　  // searchPoint(); //路线规划  //这个是规划路线的方法，在这里没有放上来，百度地图api上面有路线的规划
　　 // displayWindow(marker, poi, 1); //显示搜索框  这个是限时搜索框的方法，api上面也有,如果有需要，可以联系我
　　}else{
　　　　map.addOverlay(marker);
　　　　satrtMark.push(marker); 
　　　　//searchPoint();
　　　　//displayWindow(marker, poi, 1);
　　}
　　　　marker.enableDragging(); //标注可移动
　　　　marker.addEventListener("dragend", function(e){ //获取移动标注后的数据
　　　　//$("#startPoint").val(e.point.lng + "," + e.point.lat); //将标注存放到作用域
　　　　//var point = new BMap.Point(e.point.lng, e.point.lat);
　　　　//var mark = new BMap.Marker(point);
　　　　//displayWindow(mark, point, 1);
　　});
　}
},
{text:'<p style="font-size:12px;">以此为终点</p>',callback:function(){  //创建终点,   和起点的思路一样
　　var poi = new BMap.Point(rightclickPoint.lng, rightclickPoint.lat); //获取右键单击时的坐标
　　$("#endPoint").val(rightclickPoint.lng + "," + rightclickPoint.lat); //将标注存放到作用域
　　var marker = new BMap.Marker(poi);
　　var icons = MAT_HOST + "/public/images/endPoint.png";
　　var icon = new BMap.Icon(icons, new BMap.Size(29, 31));
　　marker.setIcon(icon);
　　if(endMark.length >= 1){
　　　　for(var i=0; i<endMark.length; i++){
　　　　map.removeOverlay(endMark[i]);
　　}
　　map.addOverlay(marker);
　　endMark.push(marker);
　　searchPoint();
　　displayWindow(marker, poi, 2);
　　}else{
　　　　map.addOverlay(marker);
　　　　endMark.push(marker);
　　　　searchPoint();
　　　　displayWindow(marker, poi, 2);
　　}
　　marker.enableDragging(); //标注可移动
　　marker.addEventListener("dragend", function(e){ //获取移动标注后的数据
　　$("#endPoint").val(e.point.lng + "," + e.point.lat); //将标注存放到作用域
　　var point = new BMap.Point(e.point.lng, e.point.lat);
　　var mark = new BMap.Marker(point);
　　displayWindow(mark, point, 2);
　　});
　　}
},
{text:'<p style="font-size:12px; padding-top:3px; margin-top:3px; border-top:1px #ADBFE4 solid;"><i class="fa fa-search-plus"></i>&nbsp;&nbsp;放大</p>',callback:function(){map.zoomIn()}},
{text:'<p style="font-size:12px;"><i class="fa fa-search-minus"></i>&nbsp;&nbsp;缩小</p>',callback:function(){map.zoomOut()}},
{text:'<p style="font-size:12px;"><i class="fa fa-plus-square-o"></i>&nbsp;&nbsp;居中</p>',callback:function(){
　　var poi = new BMap.Point(rightclickPoint.lng, rightclickPoint.lat); //获取右键单击时的坐标
　　var zoom = map.getZoom(); //居中的时候地图级别是不能修改的，所有要先获取到当前的级别
　　map.centerAndZoom(poi, zoom);
}}
];

//监听鼠标右键事件 这个是必不可少的,这个是右键获取数据的来源,所有的右键功能必须在这个的基础上做
map.addEventListener("rightclick", function(e){
　　rightclickPoint = {lng:e.point.lng,lat:e.point.lat};
});

 

 

上面的一些样式，可以忽略