Как создать Google Локатор как маркеры? - PullRequest
Новая
       4

Как создать Google Локатор как маркеры?

3 голосов
/ 26 апреля 2011

В своем приложении HTML5 я использую Google Map v3 и добавляю несколько маркеров на карту. Легко размещать новые маркеры и менять значки, но я хотел бы иметь возможность создавать маркеры, подобные тому, который используется в Google Локаторе. Эти маркеры имеют изображение значка и красивую рамку.
Есть идеи как это сделать?

1 Ответ

6 голосов
/ 28 апреля 2011

Вы можете сделать это на стороне сервера или, так как вы используете HTML 5 и предполагаете, что у вас есть доступный холст, вы можете сделать это на стороне клиента. Ниже приведен способ сделать это на стороне клиента, используя HTML 5 canvas. Выполнение этого на стороне сервера зависит от того, какой язык вы используете, но метод будет схожим.

Загрузите эти изображения и попробуйте. Изображения должны находиться в том же домене, что и страница, чтобы избежать ошибки безопасности. Они также должны находиться в том же каталоге, если вы не обновите местоположения в HTML.

face1face2face3frame

После загрузки страницы нажмите на грани, и случайный маркер будет создан с использованием прилагаемого изображения кадра и добавлен на карту Google.

enter image description here

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; utf-8">
        <title>HTML 5 Canvas Image Processing</title>
    </head>
    <body>
        <img onclick="build(this)" id="face1" src="face1.png"/>
        <img onclick="build(this)" id="face2" src="face2.png"/>
        <img onclick="build(this)" id="face3" src="face3.png"/>
        <img id="frame" src="frame.png"/>
        <div id="map_canvas" style="width:640px;height:480px;">
        </div>
        <script type="text/javascript">

            function build(caller){
                var image = getMergedUrl(document.getElementById("frame"), caller);
                var myLatLng = getRndPos(map.getBounds());
                var myMarker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    icon: image
                });

            }

            function getRndPos(bounds) {
                var xDiff = Math.abs(bounds.getNorthEast().lng() - bounds.getSouthWest().lng());
                var yDiff = Math.abs(bounds.getNorthEast().lat() - bounds.getSouthWest().lat());
                var xMin = Math.min(bounds.getNorthEast().lng(),bounds.getSouthWest().lng());
                var yMin = Math.min(bounds.getNorthEast().lat(),bounds.getSouthWest().lat());
                var x = xMin + xDiff * Math.random();
                var y = yMin + yDiff * Math.random();
                var pos = new google.maps.LatLng(y,x);
                return pos;
            }

            function getMergedUrl(frame, pic){
                // Create an empty canvas element
                var canvas = document.createElement("canvas");
                canvas.width = frame.width;
                canvas.height = frame.height;

                // Copy the image contents to the canvas
                var ctx = canvas.getContext("2d");
                ctx.drawImage(frame, 0, 0);
                ctx.drawImage(pic, 4, 4);

                // Get the data-URL formatted image
                var dataURL = canvas.toDataURL("image/png");

                return dataURL;
            }

            function initialize(){
                var myLatlng = new google.maps.LatLng(-34.397, 150.644);
                var myOptions = {
                    zoom: 8,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            }

            function loadScript(){
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
                document.body.appendChild(script);
            }

            window.onload = loadScript;
        </script>
    </body>
</html>

Спасибо Мэтью Крамли за код toDataUrl из здесь .

...