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

2021-11-30 16:02:47 阅读：251 来源： 互联网

标签：vue 自定义 width url 微信 markers height item 图片

先上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,自定义,width,url,微信,markers,height,item,图片
来源： https://blog.csdn.net/hmmmmm/article/details/121633499

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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