百度地图添加文本标注显示文字

一、业务场景

通过百度地图API的 label 添加文本覆盖物，用于显示 marker点位的描述信息。并控制 label 的显示，鼠标移入点位的时候显示文字，不移入点位的时候不显示文字。去掉背景颜色框的边框和背景颜色改成透明。

二、示例结果

鼠标移动到图标上的时候显示文字，移出的时候文字隐藏。如果想一直显示也可以，后面的鼠标监听事件去掉就好。

三、示例代码

<template><div id="mapContainer" class="map-container"></div>
</template><script>
import { onMounted } from 'vue'
import BMap from 'BMap'export default {name: 'BaiduMap',setup () {let map = nullconst pointsList = [{longitude: '116.226045',latitude: '39.663223',address: '地理位置1'}, {longitude: '116.629636',latitude: '39.789306',address: '地理位置2'}, {longitude: '116.892947',latitude: '38.36702',address: '地理位置3'}, {longitude: '108.853328',latitude: '35.562558',address: '地理位置4'}, {longitude: '112.620175',latitude: '32.288965',address: '地理位置5'}, {longitude: '116.708974',latitude: '28.144061',address: '地理位置6'}]const initMap = () => {// 创建地图实例map = new BMap.Map('mapContainer')// 根据传入的pointsList点位转化为百度Pointconst mapPointsList = []pointsList.forEach((item, index) => {mapPointsList.push(new BMap.Point(Number(item.longitude), Number(item.latitude)))mapPointsList[index].address = item.address})// 获取合理的中心点const centerPoint = map.getViewport(mapPointsList)// 初始化地图，设置中心点坐标和地图级别map.centerAndZoom(centerPoint.center, centerPoint.zoom)// 添加覆盖点mapPointsList.forEach((item,index) => {// 添加覆盖点const mapIcon = new BMap.Icon(require('./assets/map-position.png'), new BMap.Size(40, 52))const marker = new BMap.Marker(item, { icon: mapIcon })// 给地图添加覆盖物markermap.addOverlay(marker)// 创建label文本标注const label = new BMap.Label(item.address, {position: item, // 文本绑定的点位位置offset: new BMap.Size(-5, -20) // 文本位置移动})// 设置文本标注样式（刚开始标注隐藏，鼠标移入的时候再显示，如果要全部显示就直接控制display属性即可）label.setStyle({display: 'none',border: '0px',backgroundColor: '000000000001' // 用于设置背景透明色})// 通过鼠标移入marker的时候显示label标注marker.addEventListener('mouseover', function (e) {label.setStyle({ display: 'block' })})marker.addEventListener('mouseout', function (e) {label.setStyle({ display: 'none' })})// 给地图添加覆盖物labelmap.addOverlay(label)})}onMounted(() => {initMap()})return {}}
}
</script><style lang="scss" scoped>
// 地图
.map-container {width: 100%;height: 600px;
}
</style>

最主要的就是通过 addOverlay() 进行添加label 和 marker 的覆盖物。label 用于显示文字， marker用于显示定位点位。再通过鼠标的监听事件，控制 label 的显示与隐藏。

mapPointsList[index].address = item.address

也算是一步关键功能，这里通过new BMap.Point() 方法得到百度地图的定位点之后，这个点位其实是一个对象，所以给这个对象再添加 address 属性用来存放位置名称，这个属性是可以随便写的，也可以用别的名称，只要不要和通过new BMap.Point() 得到的对象中原本的属性冲突就好。
尽量是打印下new BMap.Point() 得到的点位对象，看下这步操作到底返回的是什么东西，加深理解

百度地图添加文本标注显示文字相关推荐

百度地图添加文本标注+信息窗口
效果图: 网页效果:添加文字标签需求: 页面展示marker marker旁边有标注点击marker时有弹窗提示具体信息鼠标移除时关闭弹窗提示 <!DOCTYPE html> < ...
百度地图添加文本标记
添加文本标记还是很有用处的用来给我们的地图上进行标记然后给用户一些提示啥的这个百度直接给我封装好了 api 直接调用就显示出来了官网介绍也很清晰我在自己的博客中保存一份然后 ...
百度地图添加多个marker点位标注
百度地图添加多个marker点位标注新建一个TMap.js文件 export function TMap(key) {return new Promise(function (resolve, re ...
百度地图添加标识物，并能控制标识物显示/隐藏
百度地图添加标识物,并能控制标识物显示/隐藏 <%@ page contentType="text/html;charset=UTF-8"%> <%@ inclu ...
百度地图调用加载显示Marker，并添加点击事件
百度地图调用加载显示Marker,并添加点击事件注册百度开发者账号,申请应用AK 百度地图开发平台官网点击右上角控制台,选择创建应用创建应用,勾选浏览器端,白名单填写* 注:如上线更改为公网IP ...
Android百度地图定位APP，显示出当前位置坐标
Android百度地图定位APP,显示出当前位置坐标官网配置百度地图通过CMD命令获取SHA1 在百度的官网里面创建一个应用 Android配置显示地图即定位配置 AndroidManifes ...
graphics | 基础绘图系统（三）——添加文本标注、坐标轴线和图例
前面介绍了使用使用高级绘图函数plot()绘制基本图形和使用参数函数par()美化要素.设置布局等.但有时为了表达更丰富的内容,我们还需要添加文本标注以及必要的图例,这些可以使用text().mtex ...
百度地图API 添加自定义标注多点标注
原文:百度地图API 添加自定义标注多点标注分四个文件 location.php map.css 图片数据库数据库配置自己改下 -------------------------------- ...
百度地图添加自定义图标标注以及自定义动画效果
百度地图添加自定义图标标注以及自定义动画效果 1.添加自定义图标标注 2.添加自定义动画效果 2.1.标注对象marker的构成 2.2.自定义动画效果实现过程 2.3.最终实现效果上次写的是添加自 ...

百度地图添加文本标注显示文字

一、业务场景

二、示例结果

三、示例代码

百度地图添加文本标注显示文字相关推荐

最新文章

热门文章