vue百度地图、微信小程序marker自定义图标

本文主要是介绍vue百度地图、微信小程序marker自定义图标，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

先上vue-baidu-map的文档地址https://dafrok.github.io/vue-baidu-map/#/zh/index
百度地图设置marker图标的方式有使用url地址和本地图片，首先是url的方式

    <bm-marker
          v-if="marker.cate&&!marker.isOnline"
          :position="{ lng: marker.lng, lat: marker.lat }"
          :title="marker.machineName"
          :dragging="true"
          :icon="{url:markerImg, size: {width: 52, height: 52}}"
          @click="infoWindowOpen(marker)"
        />
        //请注意一定要加上size: {width: 52, height: 52}，否则图片可能不显示。

然后是用本地的图片的方式，填写好正确的路由地址即可

      <bm-marker
        :key="item.id"
        :dragging="false"
        :top="true"
        :icon="{
          url: require('@/assets/images/onestar.png'),
          size: { width: 30, height: 29 },
        }"
        :position="{ lng: item.longitude, lat: item.latitude }"
        @click="infoWindowOpen(item)"
      >

如果还想在图片下方加上描述，如下图

可以这样实现，加一个 标签即可，可以通过 :offset="{ width: -20, height: 28 }"来调整跟图标的距离。labelStyle来调整样式，加上click事件来打开 窗口。

          <bm-marker
          :position="{ lng: marker.lng, lat: marker.lat }"
          :title="marker.machineName"
          :dragging="true"
          @click="infoWindowOpen(marker)"
        >
          <bm-info-window
            title="设备信息"
            :position="{ lng: marker.lng, lat: marker.lat }"
            :show="marker.showFlag"
            @close="infoWindowClose(marker)"
            @open="infoWindowOpen(marker)"
          >
            <p class="window-items">设备名称：{{ marker.machineName }}</p>
            <p class="window-items">设备负责人：{{ user }}</p>
            <p class="window-items">设备地址：{{ address }}</p>
          </bm-info-window>
          <bm-label
            @click="infoWindowOpen(marker)"
            :content="marker.machineName"
            :labelStyle="{
              color: '#303133',
              fontSize: '14px',
              padding: '4px 8px',
              backgroundColor: '#fff',
              boxShadow: '0 3px 3px #999',
              border: '1px solid rgb(171, 171, 171)',
            }"
            :offset="{ width: -20, height: 28 }"
          />
        </bm-marker>

小程序中设置自动义的方法，首先也还是官方文档https://developers.weixin.qq.com/miniprogram/dev/component/map.html

//html部分
  <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true"
    markers="{{markers}}" bindmarkertap="makertap" bindcallouttap="callouttap"/>
   // js部分
       app.sendRequest({
      url: "xxx",
      success: (res) => {
        markers = res.data;
        markers.forEach((item) => {
          item['iconPath'] = item.img//也可以直接写本地地址
             item['width'] = 30//可以设置高宽
                item['height'] = 30
   
        })
        self.setData({
          markers: markers
        })
      }
    });

另外图片太大可能只显示一个小角，这时可以把图片压缩一下，图片压缩的方法，见下面这篇文章。
https://blog.csdn.net/hmmmmm/article/details/121627727?spm=1001.2014.3001.5501

这篇关于vue百度地图、微信小程序marker自定义图标的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！