将遮罩应用于Google地图 [英] Apply mask to Google Map

问题描述

我有一个使用Google地图JavaScript API V3的网站。
我想通过在地图顶部放置半透明颜色来突出显示感兴趣的区域，并在中间切一个孔。见附图。

切口的位置可以在任何地方。我能够计算切出的像素（或纬度/经度）坐标，但我正在努力的是如何最好地创建一个蒙版。我看了一下Google的图片拼贴和多边形，但看不到一个简单的方法来实现这一点。任何人都可以提供任何关于最佳方式的指针吗？

解决方案

想通了。 Incase其他人需要这样做......

 函数MaskClass（map）{
 
 //常量
 var MAP_MAX_LAT = 85; 
 var MAP_MIN_LAT = -85; 
 var MAP_MAX_LNG = 179; 
 var MAP_MIN_LNG = -179; 
 
 //对象初始化 - 创建4个矩形来遮盖区域
 var rectangleInitialisationOptions = {
 map：map，
 fillColor：＃F00，
 fillOpacity：0.3，
 strokeOpacity：0，
 clickable：false 
}; 
 
 this.rectangle1 = new google.maps.Rectangle（rectangleInitialisationOptions）; 
 this.rectangle2 = new google.maps.Rectangle（rectangleInitialisationOptions）; 
 this.rectangle3 = new google.maps.Rectangle（rectangleInitialisationOptions）; 
 this.rectangle4 = new google.maps.Rectangle（rectangleInitialisationOptions）; 
 
 //放置切出的方法
 this.setMask = function（boundsSouthWest，boundsNorthEast）{
 
 var swLat = boundsSouthWest.lat（）; 
 var swLng = boundsSouthWest.lng（）; 
 var neLat = boundsNorthEast.lat（）; 
 var neLng = boundsNorthEast.lng（）; 
 
 this.rectangle1.setBounds（
 new google.maps.LatLngBounds（
 new google.maps.LatLng（neLat，MAP_MIN_LNG），
 new google.maps。 LatLng（MAP_MAX_LAT，MAP_MAX_LNG）））; 
 
 this.rectangle2.setBounds（
 new google.maps.LatLngBounds（
 new google.maps.LatLng（MAP_MIN_LAT，MAP_MIN_LNG），
 new google.maps。 LatLng（swLat，MAP_MAX_LNG）））; 
 
 this.rectangle3.setBounds（
 new google.maps.LatLngBounds（
 new google.maps.LatLng（swLat，MAP_MIN_LNG），
 new google.maps。 LatLng（neLat，swLng）））; 
 
 this.rectangle4.setBounds（
 new google.maps.LatLngBounds（
 new google.maps.LatLng（swLat，neLng），
 new google.maps。 LatLng（neLat，MAP_MAX_LNG）））; 
 
 this.setVisible（true）; 
}; 
 
 //显示/隐藏遮罩的方法
 this.setVisible = function（visibility）{
 this.rectangle1.setVisible（visibility）; 
 this.rectangle2.setVisible（visibility）; 
 this.rectangle3.setVisible（visibility）; 
 this.rectangle4.setVisible（visibility）; 
}; 
 
 
 $ / code $ / pre 
 
 
使用它... 
  theMask = new MaskClass（referenceToYourMap）; //创建掩码
 
 theMask.setMask（boundsSouthWest，boundsNorthEast）; //放置掩码
 
 theMask.setVisible（false）; //隐藏面具
  
 
I have a website using the Google-maps Javascript API V3.
I would like to highlight the region of interest by placing a semi-transparent color on top of the map with a hole cut in the middle. See image attached.

The position of the cut-out could be anywhere. I am able to calculate the pixel (or lat/lng) coordinates of the cut-out, but what I'm struggling with is how best to create a mask. I've had a look at Google's image tile overlays and polygons but couldn't see a simple way to achieve this. Can anybody offer any pointers on the best way to proceed?

解决方案
Figured it out. Incase anyone else needs to do this ...
function MaskClass( map ){

    //constants
    var MAP_MAX_LAT = 85;
    var MAP_MIN_LAT = -85;
    var MAP_MAX_LNG = 179;
    var MAP_MIN_LNG = -179;

    // Object initialisation - create 4 rectangles to mask off the area
    var rectangleInitialisationOptions = {
        map: map,
        fillColor: "#F00",
        fillOpacity: 0.3,
        strokeOpacity: 0,
        clickable: false
        };

    this.rectangle1 = new google.maps.Rectangle(rectangleInitialisationOptions);
    this.rectangle2 = new google.maps.Rectangle(rectangleInitialisationOptions);
    this.rectangle3 = new google.maps.Rectangle(rectangleInitialisationOptions);
    this.rectangle4 = new google.maps.Rectangle(rectangleInitialisationOptions);

    // Method to place the cut-out   
    this.setMask = function(boundsSouthWest, boundsNorthEast){

        var swLat = boundsSouthWest.lat();
        var swLng = boundsSouthWest.lng();
        var neLat = boundsNorthEast.lat();
        var neLng = boundsNorthEast.lng();

        this.rectangle1.setBounds(
            new google.maps.LatLngBounds(
                new google.maps.LatLng(neLat, MAP_MIN_LNG),
                new google.maps.LatLng(MAP_MAX_LAT, MAP_MAX_LNG)));

        this.rectangle2.setBounds(
            new google.maps.LatLngBounds(
                new google.maps.LatLng(MAP_MIN_LAT, MAP_MIN_LNG),
                new google.maps.LatLng(swLat, MAP_MAX_LNG)));

        this.rectangle3.setBounds(
            new google.maps.LatLngBounds(
                new google.maps.LatLng(swLat, MAP_MIN_LNG),
                new google.maps.LatLng(neLat, swLng)));

        this.rectangle4.setBounds(
            new google.maps.LatLngBounds(
                new google.maps.LatLng(swLat, neLng),
                new google.maps.LatLng(neLat, MAP_MAX_LNG)));

        this.setVisible(true);
    };

    // Method to show/hide the mask
    this.setVisible = function(visibility){
        this.rectangle1.setVisible(visibility);
        this.rectangle2.setVisible(visibility);
        this.rectangle3.setVisible(visibility);
        this.rectangle4.setVisible(visibility);
    };

}
To use it...
theMask = new MaskClass( referenceToYourMap );   //create mask

theMask.setMask(boundsSouthWest, boundsNorthEast);    //place mask somewhere

theMask.setVisible(false);    //hide mask


                        
这篇关于将遮罩应用于Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！