JS百度地图PC端API基本使用(一)
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是打开信息窗口的一个函数,第一个参数是哪一个信息窗口,第二个参数是打开的位置,图书的函数的意思是永远在地图的中央位置打开,通常是不会这样做的,往往都会传一个点位进去!