How to create Google Latitude like markers?

2019-04-12 10:15发布

站内问答 / JavaScript
685 1 4

In my HTML5 app, I use Google Map v3 and add several markers on a map. It's easy to place new markers and to change icons but I'd like to be able to build markers like the one used in Google Latitude. Those markers are set up with an icon image and a nice border.
Any ideas on how to do this ?

1条回答
beautiful°
2楼-- · 2019-04-12 11:06

You could do this server-side or since you are using HTML 5 and assuming you have the canvas available you could do this on the client-side. Below is a way to do it client-side using the HTML 5 canvas. Doing it server-side will vary by what language you are using but the technique would be similar.

Download these images and try it out. The images need to reside in the same domain as the page to avoid a security error. They should also be in the same directory unless you update the locations in the HTML.

face1face2face3frame

After the page loads, click the faces and a random marker will be created using the supplied frame image and added to the Google map.

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>

Thanks to Matthew Crumley for the toDataUrl code from here.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)