post_ico1

Geolokalizacja i Google Maps, cz. 6 – figury geometryczne

Poza nanoszeniem obiektów na mapę Google Maps istnieje możliwość narysowania różnych figur geometrycznych. W szóstej części cyklu pokażę jak to zrobić.

Odcinek

/**
 * Rysowanie odcinka
 */
function drawPollyLine() {
    var points = [// wspolrzedne kolejnych punktow odcinka
        new google.maps.LatLng(51.1462584, 21.9684219),
        new google.maps.LatLng(51.1462584, 26.9684219),
        new google.maps.LatLng(50.1462584, 21.9684219)
    ];
    var flightPath = new google.maps.Polyline({
        path: points,
        geodesic: true,
        strokeColor: '#FF0000', // kolor
        strokeOpacity: 1.0, // przezroczystosc
        strokeWeight: 2 // grubosc
    });
    flightPath.setMap(map);
}

Do rysowania odcinka służy obiekt klasy google.maps.Polyline. Odcinek może składać się z wielu punktów (ustawiam je w tablicy points). Przy tworzeniu obiektu ustawiłem kilka, podstawowych parametrów. Oczywiście nie jest to pełna lista możliwości. Więcej znajdziesz w dokumentacji.

Wielokąty

Bardo podobnie sprawa wygląda z wielokątami, które tworzy się za pomocą obiektu klasy google.maps.Polygon.

/**
 * Rysowanie wielokata
 */
function drawPolygon() {
    var points = [// wspolrzedne kolejnych wierzcholkow
        new google.maps.LatLng(47.1462584, 21.9684219),
        new google.maps.LatLng(50.1462584, 26.9684219),
        new google.maps.LatLng(50.1462584, 21.9684219)
    ];
    var polygon = new google.maps.Polygon({
        paths: points,
        strokeColor: '#FF0000', // kolor obramowania
        strokeOpacity: 0.8, // przezroczystosc obramowania
        strokeWeight: 2, // grubosc obramowania
        fillColor: '#00ff00', // kolor wypelnienia
        fillOpacity: 0.35 // przezroczystosc wypelnienia
    });
    polygon.setMap(map);
}

Koło

No i podobnie jest z kołem :)

/**
 * Rysowanie kola
 */
function drawCircle() {
    var circle = new google.maps.Circle({
        strokeColor: '#0000ff', // kolor obramowania
        strokeOpacity: 0.8, // przezroczystosc obramowania
        strokeWeight: 2, // grubosc obramowania
        fillColor: '#0000ff', // kolor wypelnienia
        fillOpacity: 0.35, // przezroczystosc wypelnienia
        center: new google.maps.LatLng(51.1462584, 21.9684219), // wspolrzedne srodka kola
        radius: 20000 // dlugosc promienia (w metrach)
    });
    circle.setMap(map);
}

Cały kod

Na koniec zamieszczam pełny kod, który rysuje na mapie wymienione wyżej figury.

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body, #map_canvas {
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
            #map-container{
                height: 100%;
            }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&amp;libraries=places"></script>
        <script>
            /**
             * 
             * @type @exp;google@pro;maps@call;Map Obiekt mapy
             */
            var map;
            /**
             * 
             * @type Array Tablica markerow
             */
            var marker = new Array();
            /**
             * 
             * @type Array Tablica chmurek z opisami dla markerow
             */
            var infowindow = new Array();

            /**
             * Tworzy obiekt mapy z podstawowymi ustawieniami
             * @returns void
             */
            function initialize() {
                var myLatlng = new google.maps.LatLng(52.24125614966341, 20.9619140625);
                var mapOptions = {
                    zoom: 7,
                    center: myLatlng
                };
                map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
                drawPollyLine();
                drawPolygon();
                drawCircle();
            }

            /**
             * Rysowanie odcinka
             */
            function drawPollyLine() {
                var points = [ // wspolrzedne kolejnych punktow odcinka
                    new google.maps.LatLng(51.1462584, 21.9684219),
                    new google.maps.LatLng(51.1462584, 26.9684219),
                    new google.maps.LatLng(50.1462584, 21.9684219)
                ];
                var flightPath = new google.maps.Polyline({
                    path: points,
                    geodesic: true,
                    strokeColor: '#FF0000', // kolor
                    strokeOpacity: 1.0, // przezroczystosc
                    strokeWeight: 2 // grubosc
                });
                flightPath.setMap(map);

            }

            /**
             * Rysowanie wielokata
             */
            function drawPolygon() {
                var points = [ // wspolrzedne kolejnych wierzcholkow
                    new google.maps.LatLng(47.1462584, 21.9684219),
                    new google.maps.LatLng(50.1462584, 26.9684219),
                    new google.maps.LatLng(50.1462584, 21.9684219)
                ];
                var polygon = new google.maps.Polygon({
                    paths: points,
                    strokeColor: '#FF0000', // kolor obramowania
                    strokeOpacity: 0.8, // przezroczystosc obramowania
                    strokeWeight: 2, // grubosc obramowania
                    fillColor: '#00ff00', // kolor wypelnienia
                    fillOpacity: 0.35 // przezroczystosc wypelnienia
                });
                polygon.setMap(map);

            }
            /**
             * Rysowanie kola
             */
            function drawCircle() {
                var circle = new google.maps.Circle({
                    strokeColor: '#0000ff', // kolor obramowania
                    strokeOpacity: 0.8, // przezroczystosc obramowania
                    strokeWeight: 2, // grubosc obramowania
                    fillColor: '#0000ff', // kolor wypelnienia
                    fillOpacity: 0.35, // przezroczystosc wypelnienia
                    center: new google.maps.LatLng(51.1462584, 21.9684219), // wspolrzedne srodka kola
                    radius: 20000 // dlugosc promienia (w metrach)
                });
                circle.setMap(map);
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map-container">
            <div id="map_canvas"></div>
        </div>


    </body>
</html>
Co sądzisz o wpisie?
BeżnadziejnySłabyŚredniDobryBardzo dobry (Brak ocen, bądź pierwszy!)
Loading...