When you draw multiple circles on Google Maps, you want to display the map only where the circles overlap.

I have a question about Google Maps API.
As the title says, I would like to display the map only where the circles overlap.

To explain in detail, the entire map is painted black with opacity of 1
I will paint out only the current point with a circle of different colors, but I would like to display the map only at the current point around a radius of 50 meters.
I will keep the current JS code, but I don't think it will be very helpful.

function initialize(){
  varmyOptions={
        zoom:17,
        mapTypeId—Google.maps.MapTypeId.HYBRID
    }

  varlat = new Array();
  varlon = new Array();
  var polylines=[];
    varmap = new google.maps.Map( document.getElementById("map_canvas"), myOptions);

    // Accuracy up
    varposition_options = {
        enableHighAccuracy —true
    };

    // Get current location information
    navigator.geolocation.watchPosition(function(position){
    lat.push (position.coords.latitude);
    lon.push (position.coords.longitude);
    varBaseCircle;


        var myLatlng = new google.maps.LatLng (position.coords.latitude, position.coords.longitude);
        map.setCenter(myLatlng);
    var circuits = [ ];
    var baselatlng = new google.maps.LatLng(lat[0],lon[0]);
    varbasecircleOption={
      center:baselatlng, // center position coordinates in the LatLng class
      radius: 1200000, // radius of circle (in meters
      map:map, // map campus to be installed
      fillOpacity: 1,
    } ;

    baseCircles = new google.maps.Circle(baseCircleOption);

    for (vari=0;i<lat.length;i++) {

      var latlng = new google.maps.LatLng(lat[i],lon[i]);
      var circleOption={
          center —Latlng, // center position coordinates in the LatLng class
          radius —Radius of 50, // circle in meters
          map —map,
    // map campus to be installed on
      } ;

      circuits[i] = new google.maps.Circle(circleOption);
    }
        // Viewing Markers
        varmarker = new google.maps.Marker({
            position: myLatlng,
            map —map
        });
    }, null, position_options);
}
google.maps.event.addDomListener(window, 'load', initialize);

Thank you for your cooperation

javascript google-maps

2022-09-30 19:33

1 Answers

I drew a custom overlay of Map using SVG's mask function.

<!DOCTYPE html>
<html>
<head>
    <metacharset="utf-8">
    <title>mask test</title>
    <style>
      US>html,body{
        height —100%;
        margin:0;
        padding:0;
      }
      #map_canvas{
        height —100%;
      }
    </style>
</head>
<body>
<divid="map_canvas"></div>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
varsvgns="http://www.w3.org/2000/svg";
function initialize() {
    varmyOptions={
        zoom:17,
        mapTypeId—Google.maps.MapTypeId.HYBRID
    };

    varlat = new Array();
    varlon = new Array();

   // Accuracy up
    varposition_options = {
        enableHighAccuracy —true
    };

    // Get current location information
    navigator.geolocation.watchPosition(function(position){
        lat.push (position.coords.latitude);
        lon.push (position.coords.longitude);

        varmap = new google.maps.Map( document.getElementById("map_canvas"), myOptions);

        var myLatlng = new google.maps.LatLng (position.coords.latitude, position.coords.longitude);
        map.setCenter(myLatlng);

        var overlay = new google.maps.OverlayView(); 

        overlay.onAdd=function(){
            var root= document.createElement("div");
            This.getPanes().overlayLayer.appendChild(root);

            varsvg = document.createElementNS(svgns, "svg");
            vardiv = map.getDiv();
            var width = div.clientWidth;
            var height = div.clientHeight;

            svg.setAttribute("width", width);
            svg.setAttribute("height", height);

            var defs = document.createElementNS(svgns, "defs");
            svg.appendChild(defs);

            var mask = document.createElementNS(svgns, "mask");
            mask.setAttribute("id", "mask");
            defs.appendChild(mask);

            varg = document.createElementNS(svgns, "g");
            g.setAttribute("fill-rule", "evenodd");
            mask.appendChild(g);

            variable = document.createElementNS(svgns, "rect");
            rect.setAttribute("mask", "url(#mask)");
            rect.setAttribute("x", 0);
            rect.setAttribute("y", 0);
            rect.setAttribute("width", width);
            rect.setAttribute("height", height);
            svg.appendChild(rect);

            root.appendChild(svg);

            overlay.draw=function(){
                while(g.firstChild){
                    g.removeChild(g.firstChild);
                }

                varmaskRect= document.createElementNS(svgns, "rect");
                maskRect.setAttribute("x", 0);
                maskRect.setAttribute("y", 0);
                maskRect.setAttribute("width", width);
                maskRect.setAttribute("height", height);
                maskRect.setAttribute("fill", "white");
                g.appendChild(maskRect);

                var projection = this.getProjection();

                for (vari=0;i<lat.length;i++) {
                    var coordinates = new google.maps.LatLng(lat[i],lon[i]);
                    varpixel=projection.fromLatLngToDivPixel(coordinates);
                    var x = pixel.x;
                    variable = pixel.y;

                    var coordinates2 = new google.maps.LatLng(lat[i]+0.00045,lon[i]);
                    varpixel2 = projection.fromLatLngToDivPixel(coordinates2);
                    var = y-pixel2.y;

                    var circle = document.createElementNS(svgns, "circle");
                    circuit.setAttribute("cx", x);
                    circuit.setAttribute("cy",y);
                    circuit.setAttribute("r",r);
                    circuit.setAttribute("fill", "black");
                    g.appendChild(circle);
                }
            }

            overlay.onRemove=function(){
                This.div_.parentNode.removeChild(this.div_);
                This.div_=null;
            }
        }

        overlay.setMap(map);

        // Viewing Markers
        varmarker = new google.maps.Marker({
            position: myLatlng,
            map —map
        });
    }, null, position_options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>

2022-09-30 19:33

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656