在 vue2-google-maps 中围绕一个点画一个圆

Question

我正在使用 Vue 构建一个站点，该站点接收一些数据并显示一个 google 带有标记的地图以及标记点周围的圆圈。

到目前为止，我可以完美地创建带有标记的地图，但是我不知道使用 Vue2-google-maps 包创建圆的正确方法是什么，尽管已经梳理了文档需很长时间。

这是目前为止的代码

    <GmapMap
      :center="center"
      :zoom="10"
      class="google-map">
        <GmapMarker
          :key="index"
          v-for="(pin, index) in markers"
          :position="pin.position"
          :icon="pin.icon"
          :clickable="true"
          :draggable="true"
          @click="center=pin.position">
        </GmapMarker>
        <GmapCircle
          :key="index"
          v-for="(pin, index) in markers"
          :center="pin.position"
          :radius="1000"
          :visible="true"
          :fillColor="red"
          :fillOpacity:="1.0">
        </GmapCircle>
    </GmapMap>

请注意，标记是在代码中其他地方创建的标记列表。

如果您取出标签，代码可以完美地放置所有标记。我只需要知道什么是正确的 tag/object 集来创建一个圆圈。

Answer 1

您的方向是正确的，vue2-google-maps 库中的 GmapCircle 组件用于在地图上创建圆圈。圆圈未显示的原因可能有多种：

center属性值为无效，支持的格式为{lat: <lat>, lng: <lng>}或google.maps.LatLng value
可能是因为体积太小而无法发现它们（鉴于提供的 2 公里直径，很容易错过它们）？

关于fillColor和fillOpacity属性，需要通过options属性传递，例如:options="{fillColor:'red',fillOpacity:1.0}"

无论如何，以下示例演示了如何通过 vue2-google-maps

在地图上创建圆圈

<GmapMap :center="center" :zoom="zoom" ref="map">
  <GmapCircle
    v-for="(pin, index) in markers"
    :key="index"
    :center="pin.position"
    :radius="100000"
    :visible="true"
    :options="{fillColor:'red',fillOpacity:1.0}"
  ></GmapCircle>
</GmapMap>



export default {
  data() {
    return {
      zoom: 5,
      center: { lat: 59.339025, lng: 18.065818 },
      markers: [
        { Id: 1, name: "Oslo", position: { lat: 59.923043, lng: 10.752839 } },
        { Id: 2, name: "Stockholm", position: { lat: 59.339025, lng: 18.065818 } },
        { Id: 3,  name: "Copenhagen", position: { lat: 55.675507, lng: 12.574227 }},
        { Id: 4, name: "Berlin", position: { lat: 52.521248, lng: 13.399038 } },
        { Id: 5, name: "Paris", position: { lat: 48.856127, lng: 2.346525 } }
      ]
    };
  },
  methods: {}
};

在 vue2-google-maps 中围绕一个点画一个圆

Drawing a circle around a point in vue2-google-maps

javascript

google-maps

vue.js

vuejs2

vue2-google-maps