百度地图点位更改图标

let icons = ''
icons = new BMapGL.Icon(require("@/assets/images/littlecar.png"), new BMapGL.Size(64, 64));

let marker = new BMapGL.Marker(point, {
    icon: icons
});
// this.map为地图实例
this.map.addOverlay(marker);

声明的 icons 就是引入你想要改变的图标图片路径  new BMapGL.Size  是设置图标在地图上显示的大小 ( 长, 宽 ) 这个可以自行改变  

marker 就是点位信息  point 里是用 new BMapGL.Point(经度, 纬度) 

addOverlay 是将点位渲染到地图实例上的方法

这里因为用的是 3D 的百度地图  所以是 BMapGL 2D 的话  改成 BMap 也是完全可以使用的

### 修改地图上标记点的样式 在不同平台的地图 API 中,自定义打点图标和样式的实现方式有所不同。以下是针对 ECharts 和百度地图的具体方法。 #### 在ECharts中自定义打点图标和样式 对于 ECharts 地图组件,在 `series` 配置项中的 `itemStyle` 可用于配置图形样式[^2]: ```javascript option = { series: [{ type: 'scatter', coordinateSystem: 'geo', symbolSize: 12, itemStyle: { // 自定义散点样式 color: '#dd4444' }, data: chinaData.map(function (dataItem) { return { name: dataItem.name, value: geoCoordMap[dataItem.name].concat([dataItem.value]), symbol: 'path://M0,0l8,-5 8,5zM8,-5v10L0,5z' // 自定义路径作为图标 }; }) }] }; ``` 此代码片段展示了如何通过指定 `symbol` 属性来自定义图标形状,并利用 `itemStyle` 来调整颜色等视觉效果。 #### 百度地图API中自定义打点图标和样式 而在百度地图 JavaScript API 下,则可以通过创建 `Icon` 对象并将其应用于 `Marker` 实例来完成相同操作[^3]: ```javascript var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), { anchor: new BMap.Size(10, 25), imageOffset: new BMap.Size(0, -25 * index) }); let marker = new BMap.Marker(point, {icon: myIcon}); // 创建标注 map.addOverlay(marker); // 将标注添加到地图当中 ``` 上述例子说明了怎样加载外部图片资源作为 Marker 的显示图像,并设置了锚点位置以及偏移量以适应不同的需求场景。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值