谷歌地图圈叠加 - 固定大小放大并缩小地图

时间:2015-12-05 04:35:35

标签: google-maps overlay zooming

我试图在地图上添加圆形叠加层,但如果用户放大或缩小地图,我必须使圆圈保持相同的大小 以下代码显示了我如何在地图上显示圆圈

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Circles</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            height: 100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>
       var citymap = [
        {
            center: {lat:21.176801, lng: 72.832036}
        }
    ];
    var gmarkers = [];
    var markers = [{
        "title": 'point1',
        "lat": '21.17700',
        "lng": '72.8321000',
        "description": 'uuu'
    }];

    function initMap() {
        // Create the map.
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 14,
            center: {lat:21.176801, lng: 72.832036},
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: [
                {
                    "featureType": "poi",
                    "stylers": [
                        { "visibility": "off" }
                    ]
                }
            ]
        });
        var infoWindow = new google.maps.InfoWindow();
        var lat_lng = new Array();
        var latlngbounds = new google.maps.LatLngBounds();
        for (i = 0; i < markers.length; i++) {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            lat_lng.push(myLatlng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                icon:'peoples_Notif.png',
                title: data.title
            });
            latlngbounds.extend(marker.position);
            (function(marker, data) {
                google.maps.event.addListener(marker, "click", function(e) {
                    infoWindow.setContent(data.title);
                    infoWindow.open(map, marker);
                });

            })(marker, data);

            google.maps.event.addListener(marker, "click", function(e) {
                map.setZoom(8);
            });
            gmarkers.push(marker);
        }
        map.setCenter(latlngbounds.getCenter());

        // Construct the circle for each value in citymap.
        //scale circle based on the radius
        for (var i=0;i<citymap.length;i++) {
            var cityCircle = new google.maps.Circle({
                strokeColor: '#FFD700',
                strokeOpacity: 1.0,
                strokeWeight: 2,
                fillColor: '#FFD700',
                fillOpacity: 1.0,
                map: map,
                center: citymap[i].center,
                radius:200
            });

        }
    }

</script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkkS2pZmOgryjc3ZX0sE5Q8tIdsm-Ged4&signed_in=true&callback=initMap"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
</body>
</html>

可以说有一个选项,我可以启用或如何去做它

1 个答案:

答案 0 :(得分:5)

有几种选择:

  1. 向地图添加zoom_changed收听者,并根据缩放级别动态调整您的圈子大小(每个缩放级别为2个不同的因素)

  2. 对圆圈使用圆形标记,SVG符号似乎起作用:

    var cityCircleM = new google.maps.Marker({
        map: map,
        position: citymap[i].center,
        title: "circle",
        icon: {
          strokeColor: '#FFD700',
          strokeOpacity: 1.0,
          strokeWeight: 2,
          fillColor: '#FFD700',
          fillOpacity: 1.0,
          path: google.maps.SymbolPath.CIRCLE,
          scale: 20,
          anchor: new google.maps.Point(0, 0)
        },
        zIndex: Math.round(citymap[i].center.lat * -100000) << 5
    
      });
    
  3. proof of concept fiddle