Vuejs google map показать маркер / координаты внутри в центре круга - PullRequest
Новая
       20

Vuejs google map показать маркер / координаты внутри в центре круга

0 голосов
/ 24 апреля 2020

Как я могу показать маркеры, которые находятся внутри моего радиуса центра? Мне нужно показать места, основанные на радиусе, потому что это будет моей основой в создании функции для поиска таких мест, основанных на радиусе км.

Вот моя карта enter image description here

Как видите, у меня много маркеров. это исходит из моей базы данных, вызывая запрос ax ios.

вот мой фрагмент кода 

     data() {
         return {
            clinics: [],
            points: '',
            property: {
               lat: 1.28237,
               lng: 103.783098
            },
            diameter: 5000
         }
      },
      methods: {
         initMap() {
            //center marker from circle
            const map = new google.maps.Map(document.getElementById('map'), {
               zoom: 13,
               center: this.property
            })
            const circle = new google.maps.Circle({
               map: map,
               trokeColor: '#FF0000',
               strokeOpacity: 0.8,
               strokeWeight: 2,
               fillColor: '#FF0000',
               fillOpacity: 0.35,
               radius: this.diameter,
               center: this.property
            });
            const marker = new google.maps.Marker({
               position: this.property,
               map: map
            });

            //other Markers
            for (var i = 0; i < this.clinics.data.length; i++) {
               var coords = this.clinics.data[i].coord;
               var details = this.clinics.data[i].clinic;
               var latLng = new google.maps.LatLng(coords['lat'], coords['lng']);
               var markers = new google.maps.Marker({
                  position: latLng,
                  map: map,
               });
               const contentString = '<div id="content"><p>' + details + '</p></div>';
               //for Info window function
               this.infoWindowShow(markers, contentString);
            }
         }

1 Ответ

3 голосов
/ 27 апреля 2020

Вы можете поместить в свою функцию для l oop, которая будет проверять расстояние между центром круга и координатой маркера, если оно будет меньше или равно радиусу, который вы установили, прежде чем строить его. Это должно выглядеть следующим образом. 

    for (var i = 0; i < this.clinics.data.length; i++) {
               var coords = this.clinics.data[i].coord;
               var details = this.clinics.data[i].clinic;
               var latLng = new google.maps.LatLng(coords['lat'], coords['lng']);

        //Get distance between the center of the circle and the coordinates
    var dist  = google.maps.geometry.spherical.computeDistanceBetween(CenterOfCircle,latLng);    

    //If distance is less than the radius, plot the markers in the map
    if (dist <= radiusOfCircle){
               var markers = new google.maps.Marker({
                  position: latLng,
                  map: map,
               });
               const contentString = '<div id="content"><p>' + details + '</p></div>';
               //for Info window function
               this.infoWindowShow(markers, contentString);
            }
  }

Вы можете использовать computeDistanceBetween () библиотеки Geometry . Обязательно добавьте «library = geometry» в сценарий, который вызывает API Карт Google.

Вот простой код, который просто зацикливается в наборе координат , и вот модификация простого кода, который просто отображает только маркеры внутри круга .

Надеюсь, это работает с вашей реализацией!

...