首页 > 其他 > 详细

百度地图,简单demo

时间:2021-05-18 16:06:00      阅读:13      评论:0      收藏:0      [点我收藏+]
<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);
}
    

 

百度地图,简单demo

原文:https://www.cnblogs.com/azure-zero/p/14780670.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!