百度地图,简单demo

<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);
}
    

 

posted @ 2021-05-18 14:04  A-zero  阅读(313)  评论(0编辑  收藏  举报