如何将多边形添加到地图答案

【问题标题】：How to add polygon to a map如何将多边形添加到地图
【发布时间】：2020-02-17 06:57:24
【问题描述】：

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

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

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])});
    }
  }

我该如何进行这项工作？

【问题讨论】：

检查您的浏览器，它是 JavaScript 控制台，看看是否有任何错误。

标签： javascript google-maps vue.js vue2-google-maps

【解决方案1】：

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

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

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

希望这会有所帮助！

【讨论】：