百度地图 JSAPI 学习

LaLaLa_OvO
已于 2022-10-09 16:41:59 修改
阅读量531
点赞数
CC 4.0 BY-SA版权
分类专栏：学习笔记文章标签：学习 html css
于 2022-10-09 16:39:49 首次发布
本文链接：https://blog.csdn.net/qq56477643/article/details/127229480
学习笔记专栏收录该内容
25 篇文章
订阅专栏
本文介绍了一个基于百度地图WebGL API的应用示例，展示了如何通过JavaScript设置和获取地图的级别、中心点，以及添加标记、信息窗口等功能。同时，还提供了地图点击事件、城市选择控件等实用功能。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>设置/获取地图级别</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: "微软雅黑";
    }
    .info {
        z-index: 999;
        width: auto;
        min-width: 22rem;
        padding: .75rem 1.25rem;
        margin-left: 1.25rem;
        position: fixed;
        top: 1rem;
        background-color: rgba(265, 265, 265, 0.9);
        border-radius: .25rem;
        font-size: 14px;
        color: #666;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.3);
    }
    #zoominput {
        height: 24px;
        width: 80px;
        padding-left: 8px;
    }
    #change-btn {
        height: 30px;
        background: #5679ea;
        border: 0;
        padding: 0 10px 0 10px;
        margin: 10px 8px 0 0;
        cursor: pointer;
        border-radius: 2px;
        color: #fff;
        font-size: 14px;
    }
	 ul li {
        list-style: none;
    }
    .btn-wrap {
        z-index: 999;
        position: fixed;
        bottom: 3.5rem;
        margin-left: 3rem;
        padding: 1rem 1rem;
        border-radius: .25rem;
        background-color: #fff;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }
    .btn {
        width: 120px;
        height: 30px;
        float: left;
        background-color: #fff;
        color: rgba(27, 142, 236, 1);
        font-size: 14px;
        border:1px solid rgba(27, 142, 236, 1);
        border-radius: 5px;
        margin: 0 5px;
        text-align: center;
        line-height: 30px;
    }
    .btn:hover {
        background-color: rgba(27, 142, 236, 0.8);
        color: #fff;
    }
    </style>
    <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=自己申请的AK"></script>
</head>
<body>
    <div class = "info">
        <div>改变地图级别:</div>
        <input id="zoominput" type="number" step="1" min="4" max="20" value="10")>
        <button id="change-btn" onclick="setNewZoom()">设置级别</button>
        <button id="change-btn" onclick="map.zoomIn()">放大一级</button>
        <button id="change-btn" onclick="map.zoomOut()">缩小一级</button>
        <button id="change-btn" onclick="getMapZoom()">获取当前级别</button>
        <button id="change-btn" onclick="setNewCenter()">随机地图中心点</button>
        <button id="change-btn" onclick="getMapCenter()">获取当前中心点</button>
    </div>
    <div id="container"></div>
	<ul class="btn-wrap" style="z-index: 99;">
        <li class = "btn" onclick = "addMapEvent()">添加地图点击事件</li>
        <li class = "btn" onclick = "removeMapEvent()">注销地图点击事件</li>
		<li class = "btn" onclick = "addRouteType()">叠加路况</li>
        <li class = "btn" onclick = "removeRouteType()">删除路况</li>
		<li class = "btn" onclick = "getInfoContent()">信息窗口内容</li>
		<li class = "btn" onclick = "search()">搜索定位</li>
    </ul>
</body>
</html>
<script>
var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(114.38680, 30.60979), 19);
//map.centerAndZoom('武汉市', 12); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);

// 创建点标记

var pointMove = new BMapGL.Point(114.38329154366592,30.610304749885298);
var markerMove = new BMapGL.Marker(pointMove, {
    enableDragging: true
});
map.addOverlay(markerMove);
var pointInfo =new BMapGL.Point(114.3878462053152,30.608050728619993);

var marker1 = new BMapGL.Marker(pointInfo);

// 创建信息窗口
var opts = {
    width: 200,
    height: 100,
    title: '测试标题'
};
var infoWindow = new BMapGL.InfoWindow('地址：测试地址', opts);
// 点标记添加点击事件
marker1.addEventListener('click', function () {
    map.openInfoWindow(infoWindow, pointInfo); // 开启信息窗口
});

// 点标记添加点击事件

// 在地图上添加点标记
map.addOverlay(marker1);

var optsLabel = {
    position: new BMapGL.Point(114.3851554082205,30.610443275987592), // 指定文本标注所在的地理位置
    offset: new BMapGL.Size(30, -30) // 设置文本偏移量
};
// 创建文本标注对象
var label = new BMapGL.Label('测试lable标题', optsLabel);
// 自定义文本标注样式
label.setStyle({
    color: 'blue',
    borderRadius: '5px',
    borderColor: '#ccc',
    padding: '10px',
    fontSize: '16px',
    height: '30px',
    lineHeight: '30px',
    fontFamily: '微软雅黑'
});
map.addOverlay(label);

var bd = new BMapGL.Boundary();
bd.get('青山区', function (rs) {
    // console.log('外轮廓：', rs.boundaries[0]);
    // console.log('内镂空：', rs.boundaries[1]);
    var hole = new BMapGL.Polygon(rs.boundaries, {
        fillColor: 'blue',
        fillOpacity: 0.2
    });
    map.addOverlay(hole);
});

function getInfoContent() {
    alert(infoWindow.getContent());
}

var menu = new BMapGL.ContextMenu();
var txtMenuItem = [
    {
        text: '放大一级',
        callback: function () {
            map.zoomIn();
        }
    }, {
        text: '缩小一级',
        callback: function () {
            map.zoomOut();
        }
    }
];
for (var i = 0; i < txtMenuItem.length; i++) {
    menu.addItem(new BMapGL.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
}
map.addContextMenu(menu);

// 创建小车图标
//var myCarIcon = new BMapGL.Icon("/car.png", new BMapGL.Size(52, 26));
// 创建Marker标注，使用小车图标
//var carPt = new BMapGL.Point(114.38158318360101,30.60856450428365);
//var carMarker = new BMapGL.Marker(carPt, {
//    icon: myCarIcon
//});
// 将标注添加到地图
//map.addOverlay(carMarker);


map.addEventListener('tilesloaded', function () {
    alert('地图加载完成！');
});

//map.addEventListener('click', function (e) {
//    alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
//});

function showInfo(e) {
    alert('经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
}

// 绘制圆

var circle = new BMapGL.Circle(new BMapGL.Point(114.394, 30.609), 500, {
    strokeColor: 'blue',
    strokeWeight: 2,
    strokeOpacity: 0.5
});
map.addOverlay(circle);


// 创建城市选择控件
var cityControl = new BMapGL.CityListControl({
	// 控件的停靠位置（可选，默认左上角）
	anchor: BMAP_ANCHOR_TOP_LEFT,
	// 控件基于停靠位置的偏移量（可选）
	offset: new BMapGL.Size(5, 100)
});
// 将控件添加到地图上
map.addControl(cityControl);

function setNewZoom() {
    var zoom = document.getElementById('zoominput').value;
    map.setZoom(zoom);
}

function getMapZoom() {
    alert(map.getZoom());
}

function setNewCenter() {
    var lng = 116.514 + Math.floor(Math.random() * 589828) / 1e6;
    var lat = 39.416 + Math.floor(Math.random() * 514923) / 1e6;
    var point = new BMapGL.Point(lng, lat);
    map.setCenter(point); // 设置地图中心点
}

function getMapCenter() {
    var cen = map.getCenter(); // 获取地图中心点
    alert('地图中心点: (' + cen.lng.toFixed(5) + ', ' + cen.lat.toFixed(5) + ')');
}

// 添加地图点击事件
function addMapEvent() {
    map.addEventListener('click', showInfo);
}

// 移除地图点击事件
function removeMapEvent() {
    map.removeEventListener('click', showInfo);
}
function search(){
  //创建地址解析器实例
        var myGeo = new BMapGL.Geocoder();
        // 将地址解析结果显示在地图上，并调整地图视野
        myGeo.getPoint('金地自在城', function(point){
            if(point){
                map.centerAndZoom(point, 16);
                map.addOverlay(new BMapGL.Marker(point, {title: '金地自在城'}))
            }else{
                alert('您选择的地址没有解析到结果！');
            }
        }, '武汉市')
}

/**
function addRouteType() {
    map.setTrafficOn(); // 叠加路况图层
}
function removeRouteType() {
    map.setTrafficOff(); // 关闭路况图层
}
**/
</script>
实现的样子
demo样子