h5嵌入百度地图

1.h5页面嵌入百度地图,可缩放,有标记点

实现代码如下:

<div id="mapcontainer"></div>


#mapcontainer{
    with:300px;
    height:300px;
}

<script src="./js/jquery-3.6.3.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你自己的ak"></script>
<script>
var map = new BMap.Map("mapcontainer", {
   coordsType: 5 // coordsType指定输入输出的坐标类型，3为gcj02坐标，5为bd0ll坐标，默认为5。
                 // 指定完成后API将以指定的坐标类型处理您传入的坐标
});          // 创建地图实例  
var point = new BMap.Point(116.421866,40.066665);  // 创建点坐标 (实际坐标去拾取) 
map.centerAndZoom(point, 15);   
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放 
// 创建标记点并添加到地图
var marker = new BMap.Marker(point);
map.addOverlay(marker);