谷歌地图Google JS API 实现

demo实现

实现源码👇

// 谷歌地图Google JS API 实现
<template>
  <div class="myMap">
    <gmp-map :center="center" zoom="15" map-id="地图自定义id">
      <gmp-advanced-marker
        v-for="(res, index) in myLatlng"
        :key="index"
        :position="`${res.latitude},${res.longitude}`"
        :title="res.name"
        :content="res.address"
        gmp-click
        @touchend="clickFn($event, res)"
      >
        <img
          class="flag-icon"
          :src="
            require(`@/assets/images/helpSupport/agent/${
              center == `${res.latitude},${res.longitude}` ? 'point2' : 'point1'
            }.png`)
          "
        />
      </gmp-advanced-marker>
    </gmp-map>
  </div>
</template>

<script>
import loadScript from "@/utils/loadScript.js";
export default {
  props: {
    myLatlng: {
      type: Array,
      default: () => [],
    },
    currentIndex: {
      type: Number,
      default: 0,
    },
    center: {
      type: String,
      required: true,
    },
  },
  watch: {
    myLatlng: {
      handler(newDate) {
        if (newDate.length > 0) {
          // window.initMap();
        }
      },
    },
    currentIndex: {
      handler(index) {
        this.center = `${this.myLatlng[index].latitude},${this.myLatlng[index].longitude}`;
        console.log(index, this.myLatlng[index]);
      },
    },
  },
  computed: {
    getLocation() {
      return window.navigator.geolocation;
    },
  },
  data() {
    return {
      infoWindow: null,
    };
  },
  mounted() {},
  async created() {
    let key = "你申请的key";
    await loadScript(
      `https://maps.googleapis.com/maps/api/js?&key=${key}&loading=async&libraries=marker&v=beta&solution_channel=GMP_CCS_complexmarkers_v3`
    );
  },
  methods: {
    clickFn(e, res) {
      console.log(e, e.target.offsetParent);
      const contentString = ` <div class='maptotip' style=" display: flex;flex-direction:             column;align-items: flex-start;justify-content: center;color:#333333;font-weight: 400;text-align: left;">
                                    <p style=" font-family: OPPOSans;font-size: 20px;color: #21A56C;">${res.name}</p>
                                    <p style=" font-family: OPPOSans;font-size: 18px;">${res.address}</p>
                                    <p style=" font-family: OPPOSans;font-size: 18px;color: #666666;">电话：${res.contractPhone}</p>
                              </div > `;
      this.infoWindow = new google.maps.InfoWindow({
        content: contentString,
        ariaLabel: res.name,
      });
      this.infoWindow.open({ anchor: e.target.offsetParent });
    },
  },
};
</script>
<style lang="less">
.myMap {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.flag-icon {
  width: 35px;
  height: 45px;
}

.maptotip {
  width: 200px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  background-color: rgba(243, 249, 254, 0.9);
  > p {
    &:nth-child(1) {
      font-family: OPPOSans;
      font-size: 32px;
      font-weight: 400;
      line-height: 42.21px;
      text-align: left;
      color: #333333;
    }
    &:nth-child(2) {
      font-family: OPPOSans;
      font-size: 26px;
      font-weight: 400;
      line-height: 34.29px;
      text-align: left;
      color: #333333;
    }
    &:nth-child(3) {
      font-family: OPPOSans;
      font-size: 24px;
      font-weight: 400;
      line-height: 31.66px;
      text-align: left;
      color: #666666;
    }
  }
}
</style>