时间戳

首页 > 解决方案 > 在组件内部但在特定元素内部初始化 Google 地图

google-maps - 在组件内部但在特定元素内部初始化 Google 地图

问题描述

我使用本教程来使用 Google 地图 API https://markus.oberlehner.net/blog/using-the-google-maps-api-with-vue/并且运行良好。但它用于this.$el在组件内加载 Google 地图实例，这会占用所有屏幕，我想在内部加载，.map这样我就可以拥有更小的地图。

<template>
  <div class="container-fluid">

    init map 


    <div class="map">
    </div>

  </div>
</template>
<script>
import ProgressSpinner from '.././Preloader';
import { mapGetters } from 'vuex'
import gmapsInit from '../.././utils/gmaps';

export default {
  name: 'Tracking',
  data: () => ({

  }),
   async mounted() {
    $('.container-fluid').bootstrapMaterialDesign();
    try {
      const google = await gmapsInit();
      const geocoder = new google.maps.Geocoder();
      const map = new google.maps.Map(this.$el);
      geocoder.geocode({ address: 'Austria' }, (results, status) => {
        if (status !== 'OK' || !results[0]) {
          throw new Error(status);
        }
        map.setCenter(results[0].geometry.location);
        map.fitBounds(results[0].geometry.viewport);
      });
    } catch (error) {
      console.error('Error with calling Google maps API: ',error);
    }
  },
  computed: {
    ...mapGetters([])
  },
  created(){
    this.$store.dispatch ('allPoints')
    .then(()=> console.log('points'))
    .catch( () => console.log('no poiints ') )
  },
  methods: {

  },
  components: {
    ProgressSpinner
    }
}
</script>

<style scoped>
.map {
  width: 150px;
}
</style>

标签： google-mapsvuejs2

解决方案

样式的问题，所以我应该给.map元素增加高度。

推荐阅读