百度地图(16)-矢量图标

1. 百度地图的矢量图标，其实还是使用 BMap.Marker 进行处理的， 只不过

这个Marker的icon 是以矢量的方式进行绘制。使用了BMap.Symbol 函数。

2. 代码

1 function addVectorSymbol() { 2 var point = new BMap.Point(116.473008,39.916605); 3 map.centerAndZoom(point, 16); 4 map.enableScrollWheelZoom(true); 5 6 //设置marker图标为人字形 7 vectorPeoplePath = new BMap.Marker(point, { 8 // 设置自定义path路径25325l99 9 icon: new BMap.Symbol('m0.5,48.67105l106.55963,0m-53.03642,45.73853l52.06349,51.09042m-52.06349,-51.57716l-48.65731,51.57716m48.41391,-112.39955l0,60.82238m16.17517,-77.24814c0,8.93415 -7.24208,16.17461 -16.17517,16.17461c-8.93307,0 -16.17464,-7.24046 -16.17464,-16.17461c0,-8.93309 7.24156,-16.1747 16.17464,-16.1747c8.93309,0 16.17517,7.24161 16.17517,16.1747z', { 10 rotation: 0,//顺时针旋转40度 11 fillColor: 'green', 12 fillOpacity: 0.8, 13 strokeColor: '#555', 14 strokeWeight: 3//线宽 15 }) 16 }); 17 18 vectorFCArrow = new BMap.Marker(new BMap.Point(point.lng-0.01,point.lat), { 19 // 初始化方向向上的闭合箭头 20 icon: new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW, { 21 scale: 5, 22 strokeWeight: 1, 23 rotation: 0,//顺时针旋转30度 24 fillColor: 'red', 25 fillOpacity: 0.8 26 }) 27 }); 28 29 vectorBCArrow = new BMap.Marker(new BMap.Point(point.lng+0.02 , point.lat), { 30 // 初始化方向向下的闭合箭头 31 icon: new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_CLOSED_ARROW, { 32 scale: 5, 33 strokeWeight: 1, 34 rotation: 180, 35 fillColor: 'gold', 36 fillOpacity: 0.8 37 }) 38 }); 39 40 vectorFOArrow = new BMap.Marker(new BMap.Point(point.lng +0.03, point.lat), { 41 // 初始化方向向上的开放式箭头 42 icon: new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW, { 43 scale: 5, 44 strokeWeight: 1, 45 rotation: 0, 46 fillColor: 'pink', 47 fillOpacity: 0.8 48 }) 49 }); 50 51 vectorBOArrow = new BMap.Marker(new BMap.Point(point.lng+0.04,point.lat), { 52 // 初始化方向向下的开放式箭头 53 icon: new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, { 54 scale: 5, 55 strokeWeight: 1, 56 rotation: 90, 57 fillColor: 'lightgreen', 58 fillOpacity: 0.8 59 }) 60 }); 61 62 //设置marker图标为水滴 63 vectorMarker = new BMap.Marker(new BMap.Point(point.lng,point.lat-0.03), { 64 // 指定Marker的icon属性为Symbol 65 icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, { 66 scale: 2,//图标缩放大小 67 fillColor: 'orange',//填充颜色 68 fillOpacity: 0.8//填充透明度 69 }) 70 }); 71 72 //设置marker图标为飞机 73 vectorPlane = new BMap.Marker(new BMap.Point(point.lng+0.04,point.lat-0.03), { 74 // 初始化小飞机Symbol 75 icon: new BMap.Symbol(BMap_Symbol_SHAPE_PLANE, { 76 scale: 3, 77 rotation: 0 78 }) 79 }); 80 81 82 vectorCLOCK = new BMap.Marker(new BMap.Point(point.lng+0.01,point.lat-0.03), { 83 // 初始化闹钟形状的symbol 84 icon: new BMap.Symbol(BMap_Symbol_SHAPE_CLOCK, { 85 scale: 2, 86 strokeWeight: 1, 87 fillColor: 'blue', 88 fillOpacity: 0.8 89 }) 90 }); 91 92 vectorWARNING = new BMap.Marker(new BMap.Point(point.lng+0.02,point.lat-0.03), { 93 // 初始化警告标志的symbol 94 icon: new BMap.Symbol(BMap_Symbol_SHAPE_WARNING, { 95 scale: 2, 96 strokeWeight: 1, 97 fillColor: 'pink', 98 fillOpacity: 0.8 99 }) 100 }); 101 102 vectorStar = new BMap.Marker(new BMap.Point(point.lng+0.03,point.lat-0.03), { 103 // 初始化五角星symbol 104 icon: new BMap.Symbol(BMap_Symbol_SHAPE_STAR, { 105 scale: 5, 106 fillColor: 'pink', 107 fillOpacity: 0.8 108 }) 109 }); 110 map.addOverlay(vectorWARNING); 111 map.addOverlay(vectorPlane); 112 map.addOverlay(vectorFCArrow); 113 map.addOverlay(vectorBCArrow); 114 map.addOverlay(vectorFOArrow); 115 map.addOverlay(vectorBOArrow); 116 map.addOverlay(vectorStar); 117 map.addOverlay(vectorMarker); 118 map.addOverlay(vectorCLOCK); 119 map.addOverlay(vectorPeoplePath); 120 map.setViewport({center:new BMap.Point(116.501035,39.897538),zoom:14}) 121 122 show(); 123 } function show(){ vectorWARNING.show(); vectorPlane.show(); vectorFCArrow.show(); vectorBCArrow.show(); vectorFOArrow.show(); vectorBOArrow.show(); vectorStar.show(); vectorCLOCK.show(); vectorMarker.show(); vectorPeoplePath.show(); } function hide(){ vectorWARNING.hide(); vectorPlane.hide(); vectorFCArrow.hide(); vectorBCArrow.hide(); vectorFOArrow.hide(); vectorBOArrow.hide(); vectorStar.hide(); vectorCLOCK.hide(); vectorMarker.hide(); vectorPeoplePath.hide(); }

3. 页面显示

4. 参考代码

https://github.com/WhatGIS/bdMap