demo实现
实现源码👇
// 谷歌地图Google JS API 实现
<template><div class="myMap"><gmp-map :center="center" zoom="15" map-id="ab6b6643adfa1a70"><gmp-advanced-markerv-for="(res, index) in myLatlng":key="index":position="`${res.latitude},${res.longitude}`":title="res.name":content="res.address"gmp-click@touchend="clickFn($event, res)"><imgclass="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 = "AIzaSyBNCb603utwcJKOno8q69DUh2iuyCNmz4U";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>
)