<div id="mymap"></div> <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=xxxxxxxxxxxxxx"></script> //需要数据lng,lat,data function initBmap(data){ var map = new BMapGL.Map(‘mymap‘); // 创建Map实例 map.centerAndZoom(new BMapGL.Point(lng, lat), 12); // 初始化地图,设置中心点坐标和地图级别 var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件 map.addControl(scaleCtrl); var zoomCtrl = new BMapGL.ZoomControl(); // 添加比例尺控件 map.addControl(zoomCtrl); // 创建添加点标记 var marker = new BMapGL.Marker(new BMapGL.Point(lng, lat)); map.addOverlay(marker); var sContent = "<div class=‘map-cont‘><h4>"+data.title+"</h4>" + "<p>地址:"+data.address+"</p>" + // "<div class=‘contact-me‘><div><img src=‘img/cm.png‘/>联系我们</div><div><img src=‘img/go.png‘/>去这里</div></div>" + "</div>"; var opts = { position: new BMapGL.Point(lng, lat), // 指定文本标注所在的地理位置 offset: new BMapGL.Size(30, -30) // 设置文本偏移量 }; // 创建文本标注对象 var label = new BMapGL.Label(sContent, opts); label.setStyle({ borderRadius: ‘5px‘, border:‘none‘, padding: ‘0.2rem‘, transform:‘translate(-70%,-100%)‘, lineHeight: ‘1.5‘, fontFamily: ‘微软雅黑‘ }); // 自定义文本标注样式 map.addOverlay(label); // map.addOverlay(sContent); }
原文:https://www.cnblogs.com/azure-zero/p/14780670.html