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>

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

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

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中的一个点周围画一个圆

1 个答案: