Vuejs谷歌地图在中心圈内显示标记/坐标

Question

如何显示在我的中心半径内的标记？我需要根据半径显示地点，因为这将是我根据地点的公里半径创建查找此类地点的功能的基础。

这是我的地图

如您所见，我有很多标记。通过调用 axios 请求来自我的数据库。

这是我的代码 sn-p

     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);
            }
         }

Answer 1

您可以在 for 循环中放置一个函数，该函数将检查圆心与标记坐标之间的距离是否小于或等于您在绘制之前设置的半径。它应该看起来像这样。

    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() of the Geometry library。确保在调用 Google Maps API 的脚本中添加“libraries=geometry”。

这是一个简单的代码，只是looping in the set of coordinates，这是对简单代码的修改，只是plotting only the markers inside the circle。

希望这适用于您的实现！