vue2-google-maps에서 점 주위에 원 그리기

vue2-google-maps에서 점 주위에 원 그리기

나는 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>

마커는 코드의 다른 곳에 생성되는 마커의 목록이라는 점에 유의하십시오.

태그를 제거하면 모든 마커를 배치하는 코드가 완벽하게 잘 작동한다.동그라미를 만드는 데 적합한 태그/객체 세트가 무엇인지 알고 싶을 뿐이다.

올바른 방향에 있습니다 구성 요소:vue2-google-maps도서관은 지도에 원을 만드는 것을 목적으로 한다.원이 표시되지 않는 몇 가지 이유가 있을 수 있다.

• center속성 값이 잘못됨, 지원되는 형식은{lat: <lat>, lng: <lng>}또는 가치
• 상대적으로 크기가 작기 때문에(제공된 경우) 이들을 찾을 수 없을 수 있음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: {}
};

참조URL: https://stackoverflow.com/questions/54010929/drawing-a-circle-around-a-point-in-vue2-google-maps