百度地图(16)-矢量图标
百度 地图 16 图标 矢量
2023-09-11 14:21:35 时间
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
相关文章
- html5移动端根据百度地图api获取详细地址
- 百度地图获取规划路径信息
- 【Recorder.js+百度语音识别】全栈方案技术细节
- 解决百度 ueditor v1.4.3 编辑器上传图片失真的bug?
- 百度竞价点击url参数分析
- php使用服务器进行远程抓取百度网页内容
- 百度地图插件
- aaronyang的百度地图API之LBS云与.NET开发 Javascript API 2.0【把数据存到LBS云1/2】
- 百度地图之定位
- 【貌似是全国首发?】galaxy note8.0拆机报告_2ch吧_百度贴吧
- 利用HTML5定位功能,实现在百度地图上定位(转)
- 百度地图移动版API 1.2.2版本(Android)地图偏移的最佳解决办法
- python调用百度人像动漫化
- Android高效率编码-第三方SDK详解系列(一)——百度地图,绘制,覆盖物,导航,定位,细腻分解!
- 百度定位sdk--报230 uid: -1 appid -1 msg: APP Scode码 校验失败总结
- Android--百度地图开发(二)
- 百度AI开放平台,文字识别接口
- 一个百度贴吧下载指定单个帖子所有回复的工具(JavaScript)实现
- 百度地图-根据经纬度定位示例-百度地图单点标注(整理)
- 百度地图定位
- 已解决Python调用免费申请的百度图形识别接口案例
- 2014百度之星初赛第一场部分题解
- js 百度地图定位
- 百度文库下载文件,没有财富的价值,音量不能下载
- 2018 “百度之星”程序设计大赛 - 初赛(B)
- 百度地图自定义瓦片切片工具