uniapp中使用百度地图如何实现图片标点并修改地图上图片大小

在uniapp中使用百度地图时，我想在地图上添加图片标点，但不知道如何调整这些图片的大小。有没有具体的实现方法或代码示例可以参考？

2 回复

在uniapp中使用百度地图，可通过<map>组件的markers属性实现图片标点。设置markers的iconPath为图片路径，width和height控制图片大小。示例：

markers: [{
  id: 1,
  latitude: 39.92,
  longitude: 116.46,
  iconPath: '/static/marker.png',
  width: 30,
  height: 30
}]

在uni-app中使用百度地图实现图片标点并修改图片大小，可以通过以下步骤实现：

1. 引入百度地图SDK

在index.html中引入百度地图JavaScript API：

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的百度地图AK"></script>

2. 创建地图容器

在vue文件中创建地图容器：

<template>
  <view>
    <div id="map-container" style="width:100%; height:500px;"></div>
  </view>
</template>

3. 初始化地图并添加图片标点

export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 初始化地图
      const map = new BMap.Map("map-container");
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
      
      // 创建自定义图标
      const myIcon = new BMap.Icon(
        '/static/marker.png',  // 图标路径
        new BMap.Size(40, 40), // 图标显示尺寸
        {
          anchor: new BMap.Size(20, 40), // 锚点位置（图标底部中心）
          imageSize: new BMap.Size(40, 40) // 图标实际尺寸
        }
      );
      
      // 创建标注点
      const point = new BMap.Point(116.404, 39.915);
      const marker = new BMap.Marker(point, {icon: myIcon});
      
      // 添加标注到地图
      map.addOverlay(marker);
    }
  }
}

关键参数说明：

  • Size(宽度, 高度)：控制图标显示大小
  • anchor：设置图标的锚点位置（相对于图标左上角）
  • imageSize：设置图标资源的实际尺寸

调整图标大小：

修改new BMap.Size()中的参数即可调整图标显示尺寸：

// 调整为80x80像素
new BMap.Size(80, 80)

注意事项：

  1. 图片路径需要使用绝对路径或static目录下的相对路径
  2. 建议使用PNG格式图片支持透明背景
  3. 图标尺寸不宜过大，建议不超过100x100像素
  4. 需要在manifest.json中配置网络白名单

通过调整Size参数即可轻松控制地图上图片标记的大小。

回到顶部