JS百度地图PC端API基本使用(一)

沉浸于冬

已于 2022-08-09 15:43:31 修改

阅读量1.1k

点赞数

文章标签： javascript 前端

于 2022-08-09 15:40:26 首次发布

本文链接：https://blog.csdn.net/qq_38329392/article/details/126246535

版权

1、创建地图

创建一个百度地图实例，类似Echarts首先先创建一个容器（盒子），如何通过new操作符创建一个地图实例，然后通过类构造函数Point new出一个中心点坐标，第一个参数为经度第二个参数是纬度。最后用centerAndZoom方法初始化一个地图，第一个参数就是我们刚才new出来的中心点坐标，第二个参数是地图级别（放大的倍数为3-19）


<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=TwtrRswKZltecLVCWH00lLOFIseNNwXG"></script>


<body>
    <div id="container"></div>
</body>

<script>
    var map = new BMap.Map("container"); 
    var point = new BMap.Point(116.404, 39.915); 
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom()
</script>

地图默认是没有常用的鼠标滚轮缩放的功能的，需要调用map.enableScrollWheelZoom方法来开启。

2、地图控件

通过addControl方法可以创造出各种控件。在创建的时候可以往new出的实例里添加配置项，可以配置控件放置的位置，以及控件的功能大小类型。

    map.addControl(new BMap.NavigationControl()); //地图默认左上角的控件，用来控制地图的平移和缩放功能
    map.addControl(new BMap.ScaleControl()); //默认在地图左下角的比例尺
    map.addControl(new BMap.OverviewMapControl()); //默认在地图右下角的可折叠的缩略地图 
    map.addControl(new BMap.MapTypeControl()); //默认在地图右上角 用来控制地图类型的
    map.addControl(new BMap.NavigationControl({
        type: BMAP_NAVIGATION_CONTROL_SMALL,
        anchor: BMAP_ANCHOR_BOTTOM_LEFT
    }))

3、在地图上绘制

（1）点的绘制

   var marker = new BMap.Marker(point); // 创建标注    
    map.addOverlay(marker); // 将标注添加到地图中
    marker.addEventListener("click", function() {
        alert("你是最帅的");
    }); //给添加点添加点击事件

创建一个标注实例，用map.addOverlay将这个实例添加到地图中，然后给点绑定点击事件（百度地图上默认会有商家或者地标之类的点点击之后会显示信息）

（2）信息窗口

var opts = {
        width: 250, // 信息窗口宽度    
        height: 100, // 信息窗口高度    
        title: "大前端" // 信息窗口标题   
    }
    var infoWindow = new BMap.InfoWindow("<div>前端开发</div><div>前端开发</div>", opts); // 创建信息窗口对象    
    marker.onclick = function() {
        map.openInfoWindow(infoWindow, map.getCenter());
    }

声明一个infoWindow实例，第一个参数是文本的内容可以是html的标签，第二个参数是信息窗口的相关配置项。

map.openInfoWindow是打开信息窗口的一个函数，第一个参数是哪一个信息窗口，第二个参数是打开的位置，图书的函数的意思是永远在地图的中央位置打开，通常是不会这样做的，往往都会传一个点位进去！