谷歌地图 - 圆圈的getBounds()不准确

时间:2017-11-10 16:07:35

标签: javascript jquery html google-maps maps

我正在尝试在Google地图中创建一个圆圈,显示圆圈半径区域内的标记,当地图移动时,圆圈将会跟随。像这个例子:

http://www.era.pt/radar/default.aspx?o=1&t=&a=&dd=&cc=&ff=&z=&cp=&nq=&p=&ar=&ca=00000000&ct=0000&or=41&idioma=pt

我遇到的问题如下:

enter image description here

我没有获得圆形区域,而是获得了一个矩形区域,我正在使用的代码如下:

var myCity = new google.maps.Circle({
                center: {lat: 38.7196268, lng: -9.1457501},
                radius: 15000,
                strokeColor: "rgb(0,0,0)",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "rgb(0,0,0)",
                fillOpacity: 0.4
});
myCity.setMap(map);

var bounds = myCity.getBounds();
var it = 0;
for (var i = 0; i <=ct; i++) {
    it=it+1;
    if(bounds.contains(coordinate[it])){
        marker[it].setVisible(true);
    }
    else{
        marker[it].setVisible(false);
    }               
}

ct是一个动态变量,现在有207个值。

以下是地图的完整脚本:

<script>
          function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 11,
              center: {lat: 38.7196268, lng: -9.1457501},
              disableDefaultUI: true,
              zoomControl: true,
              scrollwheel: false,
              navigationControl: false,
              mapTypeControl: false,
              scaleControl: false
            });
            var ct=0;
            var coordinate = [];
            var marker = [];
            var htmlString = "<?php while($row = $result->fetch_assoc()) { ?>";
            ct++;
            var rowGPSLon = "<?php echo $row['GPSLon']; ?>";
            var rowGPSLat = "<?php echo $row['GPSLat']; ?>";
            var pageID = "<?php echo $row['ID']; ?>";
            rowGPSLon = parseFloat(rowGPSLon);
            rowGPSLat = parseFloat(rowGPSLat);
            coordinate[ct] = {lat: parseFloat(rowGPSLat), lng: parseFloat(rowGPSLon)};
            marker[ct] = new google.maps.Marker({
              position: coordinate[ct],
              map: map,
              url: "http://localhost?id=" + pageID,
            });

            var htmlString2 = "<?php } ?>";



            var myCity = new google.maps.Circle({
                center: {lat: 38.7196268, lng: -9.1457501},
                radius: 15000,
                strokeColor: "rgb(0,0,0)",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "rgb(0,0,0)",
                fillOpacity: 0.4
              });
              myCity.setMap(map);

            //Retrive the center location
            google.maps.event.addListener(map, "center_changed", function() {
                var center = map.getCenter().toUrlValue().split(",");
                myCity.setCenter({lat: parseFloat(center[0]), lng: parseFloat(center[1])});

                var bounds = myCity.getBounds();
                var it = 0;
                for (var i = 0; i <=ct; i++) {
                    it=it+1;
                    if(bounds.contains(coordinate[it])){
                        marker[it].setVisible(true);
                    }
                    else{
                        marker[it].setVisible(false);
                    }

                }

            });

            var bounds = myCity.getBounds();
            var it = 0;
            for (var i = 0; i <=ct; i++) {
                it=it+1;
                if(bounds.contains(coordinate[it])==false){
                        marker[it].setVisible(false);
                }
            google.maps.event.addListener(marker[it], 'click', function() {
                jQuery(".mapLoad").load(this.url);
                jQuery(".mapLoadContainer").show(1000);
            });
            }

          }
        </script>

我的问题是,如何获得圆形区域而不是矩形区域。

0 个答案:

没有答案