如何使用vue2-google-maps创建矩形?

时间:2019-05-08 16:29:47

标签: google-maps vuejs2 vue2-google-maps

我正在使用vue2-google-maps创建一个应用程序。我需要创建一个矩形,但是我没有。我已经看过文档示例,但是出现以下错误:

  

消息:“不是LatLngBounds或LatLngBoundsLiteral:不是对象”
  名称:“ InvalidValueError”

<template>
    <gmap-map :center="center" :zoom="12" class="formeGoogleMaps">
        <gmap-marker></gmap-marker>
        <gmap-rectangle ref="rectangleRef" :center="{ north: 33.685, east: 33.671, south: -116.234, west: -116.251 }"
                        :editable="false"
                        :visible="true"
                        :options="{fillColor:'blue',fillOpacity:0.2}"
        ></gmap-rectangle>
    </gmap-map>
</template>

<script>
    export default {
        name: "MainMaps",
        data() {
            return {
                center: {lat: 41.853493, lng: 12.554369},
                markers: [],
                places: [],
                currentPlace: null,
                marker1: '',
                marker2: '',
            }
        },
        mounted: function () {

            this.$refs.rectangleRef.$rectanglePromise.then(() => {
                const {$rectangleObject} = this.$refs.rectangleRef; 
                const map = $rectangleObject.getMap();
                map.fitBounds($rectangleObject.getBounds());
            })
        }
    }

</script>

0 个答案:

没有答案