我有一个使用Google地图Javascript API V3的网站。
我想通过在地图顶部放置一个半透明颜色并在中间切开一个洞来突出感兴趣的区域。请参见附图。
切口的位置可以是任何位置。我能够计算出切口的像素(或经纬度)坐标,但我正在努力找到创建遮罩的最佳方法。我查看了Google的图像瓦片覆盖和多边形,但没有看到简单的方法来实现这一点。有人能提供有关继续进行的最佳方法的任何指针吗?
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