html5页面，百度地图api使用

爱吃玉米的螃蟹2024-12-10 14:35
复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            width: 600px;
            height: 400px;
        }
    </style>
</head>

<script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=8MkEZtKQlHHJVSB37wxL7DeIAF6K7M7f"></script>

<body>
    <!-- 创建地图容器元素 -->
    <div id="container"></div>
</body>

<script>
    // 创建地图实例=> 参数可以是元素id也可以是元素对象。
    var map = new BMapGL.Map("container");
    // 设置中心点坐标(经纬度)=>天安门坐标
    var point = new BMapGL.Point(113.298188,23.099135);
    // 地图初始化，同时设置地图展示级别
    map.centerAndZoom(point, 19);
    map.enableScrollWheelZoom(true);

    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);
    // var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
    // map.addControl(cityCtrl);


    var marker = new BMapGL.Marker(point);  // 创建标注   
    map.addOverlay(marker);  // 将标注添加到地图中
</script>

</html>
线上的话要放线上api地址
本地的话就*