更新记录

1.2（2024-08-03） 下载此版本

修复已知问题

1.1（2024-08-03） 下载此版本

修改已知问题

1.0（2024-07-20） 下载此版本

谷歌地图基础组件（定位当前，设置标记物，清空标记物）

平台兼容性

<template>
  <view class="">

    <lyf-googleMap style="width: width: 100%;height: 500rpx;" ref="googleMapInstace" :marketList="markers"
      :centerPoint="selfLocation" @markerClick="markerClick" @gMapRenderComplete="gMapRenderComplete"
      :googleKey="googleKey"></lyf-googleMap>

    <button @click="autoLocation">定位当前位置</button>
    <button @click="setMapMarker">添加标记物</button>
    <button @click="clearMapMarker">清空标记物</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        googleKey: '', // 需要去申请谷歌key
        /*
          设置地图中心点
          格式: 
            {
              lat: 23.15063,
              lng: 113.38599
            }
        */
        selfLocation: {},
        /*
          设置标记物
          格式：
          {
            icon: 'https://tpsite.oss-cn-hangzhou.aliyuncs.com/1/material/5f899981-c836-47d8-b8ed-d6b83da59aa4.png',
            position: {
              lat: 23.222,
              lng: 121.122
            }
          }
        */
        markers: []
      }
    },
    onLoad() {},
    methods: {
      // google地图渲染完成
      gMapRenderComplete() {
        console.log('google地图渲染完成');

        // 可以在这里设置地图标记物和设置地图中心点
        this.selfLocation = {
          lat: 23.15063,
          lng: 113.38599
        }
      },
      // 自动定位
      autoLocation() {
        this.$refs.googleMapInstace.autoLocation();
      },
      // 标记物被点击
      markerClick(e) {
        console.log('markder点击啦', e);
      },
      // 清除标记物
      clearMapMarker() {
        this.markers = [];
      },
      // 设置标记物
      setMapMarker() {

        this.markers = [{
          icon: 'https://tpsite.oss-cn-hangzhou.aliyuncs.com/1/material/5f899981-c836-47d8-b8ed-d6b83da59aa4.png',
          position: {
          lat: 23.15086,
          lng: 113.38599
          }
        }, {
          icon: 'https://tpsite.oss-cn-hangzhou.aliyuncs.com/1/material/5f899981-c836-47d8-b8ed-d6b83da59aa4.png',
          position: {
            lat: 23.15086,
            lng: 113.38579
          }
        }]

      }
    },
  }
</script>

<style lang="less">

</style>