zoukankan      html  css  js  c++  java
  • 百度地图,简单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);
    }
        
  • 相关阅读:
    QNET弱网测试工具
    echart
    数组按照一大一小打乱排列
    根据环境开启 vconsole
    时间戳在ios上面显示NAN Bug
    去除字符串中html标签
    ios 上 复选框背景黑边bug
    echarts配置项说明
    JS 数据处理技巧及小算法
    js中最常用的几种遍历数据方法
  • 原文地址:https://www.cnblogs.com/azure-zero/p/14780670.html
Copyright © 2011-2022 走看看