Применить маску к Google Map - PullRequest
Новая
       27

Применить маску к Google Map

4 голосов
/ 04 марта 2012

У меня есть веб-сайт, использующий Google-карты Javascript API V3.Я хотел бы выделить интересующую область, поместив полупрозрачный цвет поверх карты с вырезанным в середине отверстием.См. Прикрепленное изображение.

Положение выреза может быть где угодно.Я могу рассчитать пиксельные (или широта / долгота) координаты выреза, но я борюсь с тем, как лучше всего создать маску.Я посмотрел на наложения мозаики и полигоны Google, но не смог найти простой способ добиться этого.Кто-нибудь может предложить какие-либо указатели на лучший способ продолжить?

mask with cut-out

1 Ответ

3 голосов
/ 04 марта 2012

Разобрался. Если кто-то еще должен сделать это ... 

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);
    };

}

Чтобы использовать это ... 

theMask = new MaskClass( referenceToYourMap );   //create mask

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

theMask.setVisible(false);    //hide mask
...