（原创）vue-cli3引入google地图 —— 自己坑自己填

最新推荐文章于 2024-09-19 22:06:12 发布

K.P

最新推荐文章于 2024-09-19 22:06:12 发布

阅读量1.8k

点赞数 4

分类专栏： vue 文章标签： vue 定位 js vue.js

本文链接：https://blog.csdn.net/weixin_44314609/article/details/106016969

版权

vue 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

近日，公司需要重构一款引用google地图的app，本想用uni-app下手，发现web-view的坑真的爬不出来，挣扎一番后，弃之投vue。

google账号

想要制作google地图，账号是必须的，还有翻墙软件，参考谷歌官网或者网上搜下很多，这里就不多说。
而且需要开通结算账号，否则地图就会有一层水印遮罩层。

项目中引入地图

首先引入谷歌地图详细可看npm官网

npm install vue2-google-maps

在main.js中引入

// main.js
import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'
 
Vue.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_API_TOKEN',
    libraries: 'places', // This is required if you use the Autocomplete plugin
    // OR: libraries: 'places,drawing'
    // OR: libraries: 'places,drawing,visualization'
    // (as you require)
 
     If you want to set the version, you can do so:
    // v: '3.26',
  },
 
   If you intend to programmatically custom event listener code
   (e.g. `this.$refs.gmap.$on('zoom_changed', someFunc)`)
   instead of going through Vue templates (e.g. `<GmapMap @zoom_changed="someFunc">`)
   you might need to turn this on.
  // autobindAllEvents: false,
 
   If you want to manually install components, e.g.
   import {GmapMarker} from 'vue2-google-maps/src/components/marker'
   Vue.component('GmapMarker', GmapMarker)
   then disable the following:
  // installComponents: true,
})

在需要引入的页面中

<GmapMap
  :center="{lat:10, lng:10}"
  :zoom="7"
  map-type-id="terrain"
  style="width: 500px; height: 300px"
>
  <GmapMarker
  @dragend="updateMaker"
    :key="index"
    v-for="(m, index) in markers"
    :position="m.position"
    :clickable="true"
    :draggable="true"
    @click="center=m.position"
  />
</GmapMap>
<script>
    export default {
        data() {
            return {
                centers: {lat: 39.90419989999999,lng: 116.4073963},
                markers: [{
                    position: {lat: 39.90419989999999,lng: 116.4073963}
                }]
            }
        },
        methods：{
        	updateMaker: function(event) {
                console.log('updateMaker, ', event.latLng.lat());
                this.markers[0].position = {
                    lat: event.latLng.lat(),
                    lng: event.latLng.lng(),
                }
            },
        }
 }

以上便完成基本的地图引入过程，这样就结束了吗？真正的坑现在才来，重点来了~~

深入了解谷歌api

如果你只是调用谷歌地图看下，那你已经可以点赞退出了，但是大部分人需要使用谷歌地图进行一系列定位，定图标，调用后台数据渲染地图之类的，显然这才是重点。
谷歌地图同百度地图一样，有两种调用方式，我在上一篇中有讲解 vue引入百度地图，首先引入

<gmap-map
      id="map"
      :center="centers"
      style="width: 100%; height: calc(100vh - 2rem);margin-top:1rem;"
    >
</gmap-map>

然后发现无法引用方法，没错了，这是我选择了谷歌官网api，发现了一个好东西
大事件
通过一系列的判断、测试、实验。。。
皮卡丘，决定就是你了，不对不对，是idle（通过判断事件的发生以及先后的顺序决定），于是乎在这个方法中你就可以打印出google 这个对象；

 <gmap-map
      id="map"
      :center="centers"
      style="width: 100%; height: 100vh;"
      @idle="handler"
    >
    </gmap-map>
    
<script>
export default {
  data: () => ({
    centers: { lat: 22.6502, lng: 113.2402 }
  }),
  methods: {
  	handler(){
  		console.log(google);
  		// 实例化地图
  		let map = new google.maps.Map(document.getElementById("map"), {
        zoom: 8,
        center: this.centers,
        // 地图类型 默认
        mapTypeId: "roadmap"
        // 禁用默认控件 便于修改控件样式 自定义控件 自定义位置
        // disableDefaultUI: true
      });
  	}
  }
}
</script>

打印出这对象那就可以肆意地使用google的api进行添加方法了，首先，来尝试添加图标（或自定义图标）
注：引用本地图片使用require
官方自定义图标

handler(){
	
	...
	
	 const marker = new google.maps.Marker({
            position: pos,
            // 不写icon默认为旗标图标
            // 引用本地图片使用require
            icon: require("../assets/caron.png"),
            map: map
          });
     // 点击定标
    marker.addListener("click", function(){
    	console.log(1)
    });     
 }