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

Question

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

到目前为止，我可以完美地创建带有标记的地图，但是我不知道使用 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>

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

如果您取出标签，则代码可以完美地放置所有标记。我只需要知道用于创建圆的正确标签/对象集是什么。

Answer 1

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

• center属性值无效，支持的格式为{lat: <lat>, lng: <lng>}或google.maps.LatLng值
• 也许您因为尺寸相对较小而无法发现它们（鉴于提供的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: {}
};