如何将多边形添加到地图

Question

我正在使用 Vue.js 和 vue2-google-maps 来显示地图和多边形，但是显示多边形的功能不起作用。我是这个框架的新手。

我尝试使用 google 地图教程中的常用步骤

map.data.add({geometry: new google.maps.Data.Polygon(path)

但是没用。

这是脚本：

mounted() {
    this.addPolygon();
  },

  methods: {
    addPolygon(){
      var poly = new google.maps.Polygon({
        paths: this.paths,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
      });
      console.log(this.poly);
      this.$refs.map.$mapObject.data.add({geometry: new google.maps.Data.Polygon([this.poly])});
    }
  }

我该怎么做？

Answer 1

基于图书馆的 examples，您似乎可以像这样在地图上添加一个简单的多边形：

<gmap-map
  :center="center"
  :zoom="13"
  style="width:100%;  height: 400px;" 
>
  <gmap-polygon :paths="paths"></gmap-polygon>
</gmap-map>

有关指导和演示，您可以查看此工作 codesandbox。请记住添加您自己的 API 键以便地图正确加载。

希望对您有所帮助！

如何将多边形添加到地图

How to add polygon to a map

javascript

google-maps

vue.js

vue2-google-maps