高德地图开发：Marker 与 Polyline

项目场景：

项目背景:
1、需求实现一个不同类型标记物，图标显示不同或者颜色不同
同时在地图上提示，标记物不同颜色说明；
2、需求实现一个标记物经过的多条路径可以分别控制显示或者隐藏过滤路径

效果展示：

---

解决思路：

1. 观察原来的路径展示效果逻辑处理
2. 如何能使用最少的代码量解决这个问题；
3. 尽量少的修改原来的逻辑而是新增自己的方法

高德地图参考手册

详细阅读高德地图API参考手册，实现以上需求一定要有自己的思考方式解决思路，不要重复别的代码粘贴复制

详细设计：

MARKER 不同标记物的形状

这个实现是很简单的

官网给出的描述，我们就在这里操作；
这里需要一个美工支持帮你制作几个点标记物的图标

var icon = "images/marker-icon-blue.png";
            if(p.ZPLX!=''){
                //根据不同业务类型判断不同的图标
                icon = markIcons.get(p.ZPLX);
            }
            //这里是防止业务数据为空或者错误增加一个判断机制，如果变量没有正确的赋值就是显示默认一样
            if(icon==undefined){
                icon = "images/marker-icon-blue.png";
            }
	        m = new AMap.Marker({
	            icon: icon,
	            position: [p.GDZWJD, p.GDZWWD],
	            offset: new AMap.Pixel(-13, -20)
            });
	        m.setMap(map);

map是全局变量地图
markIcons也是全集变量
通过markIcons控制图标变换

Polyline 的动态路径显示或者隐藏

代码展示：

var colors = ["blue","black","red","green",'#04164d']
var indexCol = 0;
function aMapDrawLine(m,data, t,index){
	indexCol++;
	if(indexCol>colors.length-1){
		indexCol=0;
	}
	var color = colors[indexCol];
    var polyline = new AMap.Polyline({
        path: data,          //设置线覆盖物路径
        strokeColor: color, //线颜色
        strokeOpacity: 0.5,     //线透明度
        strokeWeight: 3,      //线宽
        strokeStyle: "solid",   //线样式
        strokeDasharray: [10, 5], //补充线样式
        // showDir: true
    });
    var s = "线路名称:"+t.XLMC+",运行方向:"+t.XLYXFXMC;
    polyline.c_back= s;
    polyline.on('click', function(e) {
    	clickInfoWindow(e,s);
    });
    polyline.setMap(map);
    polyline_list.push(polyline);

    //改变线路轨迹显示或者隐藏
    var key = t.XLID+"-"+t.XLYXFX;
    xlMap.set(key,polyline);
    var name = 'xgxl_'+index;
    var showXlTR = `<tr><td><span >${t.XLMC}</span></td>
                    <td><span>-</span><span >${t.XLYXFXMC}</span></td>
                    <td><span> &nbsp;&nbsp;显示：</span>
                    <input type="radio" name=${name} value="1" checked="checked" data-id="${key}"  οnclick="changeXlgj(this)"/></td>
                    <td><span> &nbsp;&nbsp;隐藏：</span>
                    <input type="radio" name=${name} value="0" data-id="${key}"  οnclick="changeXlgj(this)"/></td></tr>`;
    $('#showXl').append(showXlTR);
}

解决思路分析：

1. 我的想法是一个标记物途径多条线路，我要把每条线路唯一标识找到
2. 然后把每一个key对应的折线对象放到Map对象中
3. 最后根据不同的key变化让地图removed掉路径或者add路径就可以实现
4. 实现代码如下面的操作

function changeXlgj(item){

    var _this = $(item);
    var flag = _this.val();//1 显示 0 隐藏
    var key = _this.data('id');
    var dto = xlMap.get(key);

    if(flag==1){
        map.add(dto);
    }else{
        map.remove(dto);
    }

}

路径显示隐藏展示：

全显示：

全不显示：

任意一条显示：

InfoWindow 信息窗体的使用

关于上图的内容做一下详细介绍：
首先是拼接一个显示信息：这个不是我写的；
我现在就是要把这个显示信息展示出来
原来的开发者，选择在marker的label属性显示很不美观也不方便
所以我采用了InfoWindow的信息窗体

划重点！划重点！划重点！

m.c_back =s ;//这个操作是比较关键的，marker对象可以提供自定义属性信息
m.on('click', function(e) {
	//这个e事件对象就是我们下面图片，高德地图的关键指示
	 showMarkInfo(e);
});

function showMarkInfo(event){
    infoWindow = new AMap.InfoWindow({
    //自定义展示内容event.target.c_back就是marker对象我们加入的自定信息内容
        content: '<div style="color: white;opacity:0.7;background:#2B333F;padding: 5px 10px 5px 10px;height: 100%px;width: 350px">' +
            '<div class="bus-tip-top"><span>'+event.target.c_back+'</span></div></div>', 
        // anchor: 'bottom-left',
        isCustom:true,//是否自定义窗体信息一定要true默认是false
        closeWhenClickMap:true,//鼠标点到地图其他位置就关闭信息窗体
        offset:new AMap.Pixel(0, -30)
    });
    //这个mark.lnglat就是传入的MapsEvent的发生事件光标所在的位置
    infoWindow.open(map,event.lnglat ,200);
}

info效果展示

点击Marker 效果

点击Polyline效果