一、js引入方式
1、js引入
Gmaps.vue,其中remote-js是封装的js引入，确保google map运行时，js已下载
<template>
<div>
<div id="Gmaps"/>
<remote-js
:js-load-call-back="loadRongJs"
jsUrl="https://maps.googleapis.com/maps/api/js?key=你的key" />
</div>
</template>
<script>
import RemoteJs from './remoteJs'
export default {
components: { RemoteJs },
props: {
mapData: {
type: Object,
required: true
}
},
methods: {
loadRongJs() {
// console.log(this.mapData)
var options = {
zoom: 15,
// 1：世界
// 5：大陆/大陆
// 10：城市
// 15：街道
// 20：建筑物
center: { lat: this.mapData.latitude, lng: this.mapData.longitude },
// 动态从调用组件传递经纬度
disableDefaultUI: false,
zoomControl: true
}
var map = new google.maps.Map(document.getElementById('Gmaps'), options)
let marker = new google.maps.Marker({
position: { lat: this.mapData.latitude, lng: this.mapData.longitude },
map: map,
title: 'Google Map', // 鼠标悬浮显示
// 此处的icon为标记的自定义图标
// icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
// animation: google.maps.Animation.DROP,
width: '20px',
height: '20px'
})
marker.setMap(map)
// 配置定位点鼠标点击显示内容 本文是父组件传过来的
var infowindow = new google.maps.InfoWindow({
content: this.mapData.address
})
marker.addListener('click', function() {
infowindow.open(map, marker)
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
#Gmaps {
width: 100%;
height: 28rem;
border-radius: 5px;
}
</style>
remoteJs.vue
<template>
<remote-js :src="jsUrl" @load-js-finish="jsLoadCallBack"/>
</template>
<script>
export default {
components: {
'remote-js': {
render(createElement) {
var self = this
return createElement('script', {
attrs: { type: 'text/javascript', src: this.src },
on: {
load: function() {
// console.log('load js')
self.$emit('load-js-finish')
}
}
})
},
props: {
src: { type: String, required: true }
}
}
},
props: {
jsUrl: { type: String, required: true }, // 需要加载的外部url
jsLoadCallBack: Function// 外部js加载完成回调
}
}
</script>
使用
<GMaps :map-data="mapData" class="Gmaps"/>
data() {
return {
mapData: ''{
latitude: parseFloat(this.detail.locationLat),
longitude: parseFloat(this.detail.locationLng)
}
}
}
二、使用 vue2-google-maps
1、安装
npm install vue2-google-maps
2、main.js引入
import * as VueGoogleMaps from 'vue2-google-maps'
Vue.use(VueGoogleMaps, {
load: {
key: '你的map key',
libraries: '3.26'
}
})
3、使用
<gmap-map
:center="centers"
:zoom="16"
map-type-id="terrain"
ref="myMap"
style="width: 100%; height: 100%"
>
<gmap-info-window v-if="!isMapFirstInit" :options="infoOptions"
:position="infoWindowPos" :opened="infoWinOpen" @closeclick="infoWinOpen=false" />
<gmap-marker
v-for="(m, index) in markers"
:key="index"
:position="m.position"
:clickable="true"
:label="isMapFirstInit ? '' : (index + 1).toString()"
:draggable="true"
@click="toggleInfoWindow(m, index)"
@mouseover="statusText = m.text"
@mouseout="statusText = null"
/>
</gmap-map>
<script>
import { gmapApi } from "vue2-google-maps"
data() {
return {
isMapFirstInit: true,
infoOptions: {
content: '',
// optional: offset infowindow so it visually sits nicely on top of our marker
pixelOffset: {
width: 0,
height: -35
}
},
infoWindowPos: null,
infoWinOpen: false,
currentMidx: null,
map: null,
flag: false,
defaultCenter: {
lat: 9.124168, lng: 7.397120
},
centers: {
lat: 9.124168, lng: 7.397120
},
defaultMarkers: [
{
position: { lat: 9.124168, lng: 7.397120 }
}
],
markers: [
{
position: { lat: 9.124168, lng: 7.397120 }
}
],
place: null
}
}
computed: {
google: gmapApi
},
mounted() {
this.initMapZoom()
},
methods: {
initMapZoom(isMapFirstInit,) {
let mapRefs = this.$refs.myMap
mapRefs.$mapPromise
.then(map => {
this.map = map
// const selection = this.$store.state.geoModule.mapSearchSelection
// this.filterCoords(selection)
this.setBounds()
})
.catch(err => {
throw err
})
},
setBounds() {
try {
let mapRefs = this.$refs.myMap
let bounds = new this.google.maps.LatLngBounds()
if (this.markers) {
this.markers.forEach(loc => {
bounds.extend(loc.position)
})
}
// 自适应地图大小，用来包括所有标注的点
this.$nextTick().then(() => {
mapRefs.fitBounds(bounds)
})
} catch (error) {
throw error
}
},
// 点击标点出现的提示文案
toggleInfoWindow: function(marker, idx) {
this.infoWindowPos = marker.position;
this.infoOptions.content = marker.buyerName;
// check if its the same marker that was selected if yes toggle
if (this.currentMidx == idx) {
this.infoWinOpen = !this.infoWinOpen;
}
// if different marker set infowindow to open and reset current marker index
else {
this.infoWinOpen = true;
this.currentMidx = idx;
}
// 判断是否已选中到右边
// let item = this.selectByMapListTrue.find(item => {
// return (item.id == marker.id)
// })
// if (!item) {
// this.selectByMapListTrue.push(marker)
// } else {
// this.$message({
// showClose: true,
// message: '此门店已添加，请勿重复添加',
// type: 'warning'
// })
// }
},
}
</script>
