百度地图api-拖拽-滚轮缩放-标记红点

最新推荐文章于 2025-06-29 13:11:22 发布

原创最新推荐文章于 2025-06-29 13:11:22 发布 · 4.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图 #接口

笔记大全同时被 3 个专栏收录

6 篇文章

订阅专栏

JavaScript

3 篇文章

订阅专栏

HTML

2 篇文章

订阅专栏

本文展示了一个使用百度地图API创建地图并进行初始化的HTML代码示例。通过设置地图的中心点坐标为福州市，并调整地图的缩放级别，演示了如何在网页中嵌入并定制百度地图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

API秘钥
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>
<!--百度地图容器-->
<div style="width:500px;height:300px;border:#ccc solid 1px;font-size:12px" id="map"></div>

</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=46ce9d0614bf7aefe0ba562f8cf87194"></script>
<script type="text/javascript">

    //创建和初始化地图函数：
    initMap();
    function initMap(){
        var map = new BMap.Map("map");
        var point = new BMap.Point(119.303362,26.080721); //福州市
        map.centerAndZoom(point, 12);
        var marker = new BMap.Marker(point);   // 创建标注
        map.addOverlay(marker);
        map.enableScrollWheelZoom(true);  //启用滚轮放大缩小，默认禁用
        map.enableKeyboard(true);         //启用键盘操作，默认禁用。
        map.enableDragging();             //启用地图拖拽，默认启用
        map.enableDoubleClickZoom();      //启用双击放大，默认启用
        map.addControl(new BMap.NavigationControl()); //平移缩放控件
        map.addControl(new BMap.ScaleControl());      //比例尺控件
    }
</script>
</html>