百度地图自定义marker、文本标注
最近需要在百度地图上做一个自定义icon,并且有标注,翻看了一下api,自定义icon和标注是分开的,两者放一起效果如下:
相关代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自定义Marker图标</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <style> body, html, #container { overflow: hidden; width: 100%; height: 100%; margin: 0; font-family: "微软雅黑"; } </style> <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script> </head> <body> <div id="container"></div> </body> </html> <script type="text/javascript"> var map = new BMapGL.Map('container'); var point = new BMapGL.Point(116.404, 39.915); map.centerAndZoom(point, 15); // 创建小车图标 var myIcon = new BMapGL.Icon("/jsdemo/img/car.png", new BMapGL.Size(52, 26)); // 创建Marker标注,使用小车图标 var pt = new BMapGL.Point(116.417, 39.909); var marker = new BMapGL.Marker(pt, { icon: myIcon }); // 创建文本标注对象 var labelopts = { position: pt, // 指定文本标注所在的地理位置 offset: new BMapGL.Size(-5, 10) // 设置文本偏移量 }; var label = new BMapGL.Label('测试标注', labelopts); label.setStyle({ color : "#fff", fontSize : "14px", backgroundColor :"0.05", backgroundColor:"#84C1FF", border :"0", fontWeight :"bold" }); map.addOverlay(label); map.addOverlay(marker); </script>