foodie-server/foodie_sj_vue/src/components/googlemap.vue

<template>
  <div class="content">
    <div v-if="mapType == 'selectPoint'" style="display: flex;align-items: center;margin-bottom: 20px;">
      <div>{{$t('mendian.SearchAddress')}}：</div>
      <input
          id="pac-input"
          type="text"
          :placeholder="$t('mendian.Pleasekeywords')"
      />
      <div style="margin-left: 20px;">{{$t('mendian.currentlocation')}}:{{address}}</div>
    </div>
    <div :style="googleMapStyle" class="googleMap" :id="mapID"></div>
  </div>
</template>

<script>
import {getfenlei,storelistlist,getAddr} from '@/api/store';
import { Loader } from "@googlemaps/js-api-loader"

export default {
  name:'googlemap',
  props: {
    //mapType属性值为:
    //selectPoint时是地图选点
    //POLYGON是绘制地图多边形区域

    //地图id
    mapID: {
      type: String,
      default: () => {
        return 'googleMap'
      },
    },
    //谷歌地图类型
    mapType: {
      type: String,
      default: () => {
        return 'default'
      },
    },
    //谷歌地图样式
    googleMapStyle: {
      type: Object,
      default: () => {
        return {
          wdith: '100%',
          height: '500px',
        }
      },
    },
    //谷歌地图配置
    mapOptions: {
      type: Object,
      default: () => {
        return {
          //为了关闭默认控件集,设置地图的disableDefaultUI的属性为true
          disableDefaultUI: false,
          // 启用缩放和平移
          gestureHandling: 'greedy',
          panControl: true,
          zoomControl: true,
          scaleControl: true,
          //关闭街景
          streetViewControl: false,
        }
      },
    },
    //谷歌地图中心点
    googleMapCenter: {
      type: Object,
      default: () => {
        return {
          lat: 21.031859020043132,
          lng:105.82760815495604
        }
      },
    },
    //谷歌地图缩放级别
    zoom: {
      type: Number,
      default() {
        return 11
      },
    },
    //谷歌地图图形path
    mapPath: {
      type: String,
      default: () => {
        return ''
      },
    },
  },
  data() {
    return {
      //地图选点回显值
      longlat: 21.031859020043132 + ',' + 105.82760815495604,
      //标记点
      marker: [],
      //图形实例
      graphicalExample: null,
      //图形路径经纬度
      graphicalPath: [],
      apiKey: 'AIzaSyBt-bYNprVqfpY3fPgoOj0RKbnC_g7ii1k', //旧的AIzaSyAnz_I0VUlPvt73NIocb_7tomJOW4CdwHk
      map:null,
      googMap:null,
      googMarker:null,
      address:''
    }
  },
  created() {
    this.initMap();
  },
  methods:{

    // initMap is now async
    async initMap() {
      var that = this;
      const loader = new Loader({
        apiKey: this.apiKey,
        version: "weekly",
        libraries: ['places', 'drawing'], //插件库places为基础库 drawing为绘制工具库
        language: this.$t('loding.language')
      });
      const mapOptions = {
        center: { lat: this.googleMapCenter.lat * 1, lng: this.googleMapCenter.lng * 1 }, //中心点
        zoom: this.zoom, //缩放级别
        mapId:this.mapID,
        ...this.mapOptions, //其他配置
      }
      await loader.load().then(async () => {
        this.googMap = await google.maps.importLibrary("maps");
        this.googMarker = await google.maps.importLibrary("marker");
        this.map = new this.googMap.Map(document.getElementById(this.mapID), mapOptions);
        this.map.addListener('click', (e) => {
          console.log('点击事件',e);
          this.marker.map = null;
          this.marker = new this.googMarker.AdvancedMarkerElement({
            map:this.map,
            position: { lat: e.latLng.lat(), lng: e.latLng.lng() },
          });
        })
      });
    },
    // 逆向地址
    // getdizhi(lat){
    // 	var user = JSON.parse(localStorage.getItem('user'));
    // 	var params={
    // 		latlng:lat,
    // 		id:user.id
    // 	}
    // 	getAddr(params).then(res=>{
    // 		this.address = res.data.address
    // 		this.$emit('golat',{lat:lat,address:res.data.address})
    // 	})
    // },
    // //回显图形
    // echoGraphical() {
    // 	if (this.mapType == 'POLYGON') {
    // 		//回显多边形
    // 		this.graphicalPath = this.mapPath
    // 		let paths = JSON.parse(this.graphicalPath)
    // 		// Construct a draggable red triangle with geodesic set to true.
    // 		this.graphicalExample = new this.googleApi.maps.Polygon({
    // 			paths,
    // 			fillColor: 'blue',
    // 			strokeColor: 'blue',
    // 			strokeOpacity: 0.8,
    // 			fillOpacity: 0.4,
    // 			strokeWeight: 5,
    // 			clickable: true,
    // 			editable: true,
    // 			zIndex: 1,
    // 		})
    // 		this.graphicalExample.setMap(this.googleMap)
    // 		//监听回显图形每一个路径点
    // 		this.googleApi.maps.event.addListener(this.graphicalExample.getPath(), 'insert_at', (event) => {
    // 			this.setPath(this.graphicalExample.getPath().Ld)
    // 		})
    // 		this.googleApi.maps.event.addListener(this.graphicalExample.getPath(), 'set_at', (event) => {
    // 			this.setPath(this.graphicalExample.getPath().Ld)
    // 		})
    // 	}
    // },
    // //path路径emit传出
    // setPath(path) {
    // 	this.graphicalPath = []
    // 	if (path.length > 0) {
    // 		path.forEach((v) => {
    // 			this.graphicalPath.push({ lat: v.lat(), lng: v.lng() })
    // 		})
    // 		this.$emit('getGraphicalPath', this.graphicalPath)
    // 	}
    // },
    // //搜索地点方法
    // selectPoint() {
    // 	const input = document.getElementById('pac-input')
    // 	const searchBox = new this.googleApi.maps.places.SearchBox(input)
    // 	const infoWindow = new this.googleApi.maps.InfoWindow()
    // 	// this.googleMap.controls[this.googleApi.maps.ControlPosition.TOP_LEFT].push(input)
    // 	this.googleMap.addListener('click', (e) => {
    // 		this.clickGmap(e)
    // 	})
    // 	this.googleMap.addListener('bounds_changed', () => {
    // 		searchBox.setBounds(this.googleMap.getBounds())
    // 		let markers = []
    // 		searchBox.addListener('places_changed', () => {
    // 			const places = searchBox.getPlaces()

    // 			if (places.length == 0) {
    // 				return
    // 			}

    // 			// Clear out the old markers.
    // 			markers.forEach((marker) => {
    // 				marker.setMap(null)
    // 			})
    // 			markers = []

    // 			// For each place, get the icon, name and location.
    // 			const bounds = new this.googleApi.maps.LatLngBounds()

    // 			places.forEach((place) => {
    // 				if (!place.geometry || !place.geometry.location) {
    // 					// console.log('Returned place contains no geometry')
    // 					return
    // 				}

    // 				const icon = {
    // 					url: place.icon,
    // 					size: new this.googleApi.maps.Size(71, 71),
    // 					origin: new this.googleApi.maps.Point(0, 0),
    // 					anchor: new this.googleApi.maps.Point(17, 34),
    // 					scaledSize: new this.googleApi.maps.Size(25, 25),
    // 				}

    // 				// Create a marker for each place.
    // 				markers.push(
    // 					new this.googleApi.maps.marker.AdvancedMarkerElement({
    // 						map: this.googleMap,
    // 						icon,
    // 						title: place.name,
    // 						position: place.geometry.location,
    // 						draggable: false,
    // 						title: 'Uluru'
    // 					})
    // 				)
    // 				if (place.geometry.viewport) {
    // 					// Only geocodes have viewport.
    // 					bounds.union(place.geometry.viewport)
    // 				} else {
    // 					bounds.extend(place.geometry.location)
    // 				}
    // 			})
    // 			this.googleMap.fitBounds(bounds)
    // 		})
    // 	})
    // },
    // //点击地图回调
    // clickGmap(e) {
    // 	console.log('点击回调',e)
    // 	this.longlat = e.latLng.lat() + ',' + e.latLng.lng()
    // 	this.$emit('setLongLat', this.longlat)
    // 	this.addDraggableMarkers(1, true, { lat: e.latLng.lat(), lng: e.latLng.lng() })
    // 	this.getdizhi(this.longlat);
    // },
    // //移动标记点回调
    // updateMaker(e) {
    // 	console.log('移动回调',e)
    // 	this.longlat = e.latLng.lat() + ',' + e.latLng.lng()
    // 	this.$emit('setLongLat', this.longlat)
    // },
    // //添加可拖动的标记点
    // addDraggableMarkers(max, draggable, { lat = 0, lng = 0 }) {
    // 	if (max != -1) {
    // 		this.marker.forEach((marker) => {
    // 			marker.setMap(null)
    // 		})
    // 		this.marker = []
    // 	}
    // 	this.marker.push(
    // 		new this.googleApi.maps.Marker({
    // 			map: this.googleMap,
    // 			position: { lat: lat, lng: lng },
    // 			draggable: draggable,
    // 		})
    // 	)
    // 	if (draggable) {
    // 		this.marker[0].addListener('dragend', (e) => {
    // 			this.updateMaker(e)
    // 		})
    // 	}
    // },
    //获取经纬度
    // getLongLat() {
    // 	return this.longlat
    // },
    //设置地图中心点位置
    // setMapPanBy(e) {
    // 	let latlng = new this.googleApi.maps.LatLng(e.lat,e.lng)
    // 	this.googleMap.setCenter(latlng)
    // 	this.marker[0].setPosition(latlng);
    // },
  }
}
</script>

<style>
</style>