0

GoogleMapsAPIについての質問です。
タイトルの通り円が重なった部分だけ地図を表示するようにしたいです。

詳しく説明すると地図全体は不透明度1で黒く塗りつぶされていて
現在地点だけ別の色の円で塗りつぶすのですが現在地点だけ半径50m周辺だけ地図を表示するようにしたいです。
一応今のJSのコードをおいておきますがあまり参考にならないと思います。

function initialize(){
  var myOptions = {
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }

  var lat=new Array();
  var lon=new Array();
  var polylines = [] ;
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    // 精度UPあり
    var position_options = {
        enableHighAccuracy: true
    };

    // 現在位置情報を取得
    navigator.geolocation.watchPosition(function(position) {
    lat.push(position.coords.latitude);
    lon.push(position.coords.longitude);
    var BaseCircle;


        var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        map.setCenter(myLatlng);
    var circles = [] ;
    var baselatlng = new google.maps.LatLng( lat[0], lon[0] ) ;
    var basecircleOption = {
      center: baselatlng ,      // 中心の位置座標をLatLngクラスで指定
      radius: 1200000 , // 円の半径(メートル単位)
      map: map ,    // 設置する地図キャンパス
      fillOpacity: 1 ,
    } ;

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

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

      var latlng = new google.maps.LatLng( lat[i], lon[i] ) ;
      var circleOption = {
          center: latlng ,      // 中心の位置座標をLatLngクラスで指定
          radius: 50 ,  // 円の半径(メートル単位)
          map: map ,
    // 設置する地図キャンパス
      } ;

      circles[i] = new google.maps.Circle( circleOption ) ;
    }
        // マーカーの表示
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map
        });
    }, null, position_options);
}
google.maps.event.addDomListener( window , 'load' , initialize ) ;

よろしくお願いします

1 件の回答 1

1

Mapのカスタム・オーバーレイに対して、SVGのマスク機能を使って描画させてみました。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>mask test</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map_canvas {
        height: 100%;
      }
    </style>
</head>
<body>
<div id="map_canvas"></div>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var svgns = "http://www.w3.org/2000/svg";
function initialize() {
    var myOptions = {
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };

    var lat=new Array();
    var lon=new Array();

   // 精度UPあり
    var position_options = {
        enableHighAccuracy: true
    };

    // 現在位置情報を取得
    navigator.geolocation.watchPosition(function(position) {
        lat.push(position.coords.latitude);
        lon.push(position.coords.longitude);

        var map = 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);

            var svg = document.createElementNS(svgns, "svg");
            var div = 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);

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

            var rect = 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);
                }

                var maskRect = 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 (var i = 0; i < lat.length; i++) {
                    var coordinates = new google.maps.LatLng(lat[i], lon[i]);
                    var pixel = projection.fromLatLngToDivPixel(coordinates);
                    var x = pixel.x;
                    var y = pixel.y;

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

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

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

        overlay.setMap(map);

        // マーカーの表示
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map
        });
    }, null, position_options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
2
  • 回答ありがとうございます。 大体仕様と合ってるのですが現在位置が更新されると画面が一回一回更新でチカチカするのはどうにかならないでしょうか。
    – patchgi
    Commented 2016年1月12日 7:05
  • あとスマホから見るとよくブラウザが落ちてしまいます。 せっかくやってもらったのに申し訳ありません
    – patchgi
    Commented 2016年1月12日 7:39

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。