页面2，类似安居客-mapbox自定义marker标记点和标签实现地图找房

这两天在做一个海外租房的项目，用到了mapbox，就想着把相关涉及到的知识点整理出来分享给大家。

【功能】将返回的房源信息全部显示在地图上，自定义标记点图标，并显示每个房源的价格，点击标记点时切换房源信息，在下方以卡片形式显示房源图文信息；

【难点】

1、将默认标记点显示成房源图片；

2、在标记点上方显示价格标签；

3、marker点击事件，点击标记点，切换房源信息，底部弹窗里的数据跟着变化；

【核心步骤】

1、根据接口返回的房源列表循环在地图上创建标记点和价格标签；

2、给标记点添加点击事件；

【效果】先看最后的效果，源代码在最后面，可直接复制使用；

（*注意）同样要记得把mapboxgl.accessToken换成自己的mapbox账号下的token才行哦

 【具体步骤】

1、新建HTML页面，创建地图；

这个大家应该都会，我上一篇文章也讲过，这里就不再赘述；

2、根据返回的数据在地图上循环创建标记点，自定义标记点图标改成房源图片；

const el = document.createElement('img'); //自定义标记点图片
el.className = 'marker';
el.src = item.img; //图片路径赋值

这里跟上一篇文章一样，可参考这篇文章页面1、mapbox添加自定义图片marker标记点和气泡弹窗_殇舞天涯的博客-CSDN博客

3、 添加价格标签；

注意了，这里同添加标记点一样，添加了一个自定义的label标签，标签里显示价格，给了一个自定义的“mtip”类，在style样式里可以自定义这个价格标签的样式，地图创建出来的标签默认是absolute定位的，不需要改；

const el2 = document.createElement('label'); //自定义价格标签
el2.className = 'mtip';
el2.innerHTML = '$' + item.price; //显示价格

4、给标记点添加点击事件，点击地图标记点时，切换下方房源的图文信息：

                    //添加标记点击事件