Рисование круга вокруг точки в vue2-google-maps - PullRequest
Новая
       36

Рисование круга вокруг точки в vue2-google-maps

0 голосов
/ 02 января 2019

Я использую 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>

Обратите внимание, что маркеры - это список маркеров, который создается где-то еще в коде.

Если вы уберете теги, код прекрасно работает, разместив все маркеры. Мне просто нужно знать, каков правильный набор тегов / объектов для создания круга.

1 Ответ

0 голосов
/ 02 января 2019

Вы на правильном пути, компонент 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: {}
};
...