如何创建Google Latitude类似标记？

在我的HTML5应用程序中，我使用Google Map v3并在地图上添加了多个标记。很容易放置新标记并更改图标，但我希望能够构建像Google Latitude中使用的标记。这些标记设置了一个图标图像和一个不错的边框。
关于如何做到这一点的任何想法？如何创建Google Latitude类似标记？

来源

2011-04-26 Luc

您是使用任何JavaScript框架还是愿意使用支持JavaScript框架的插件？ – kjy112 2011-04-26 15:22:51

@ kjy112，我只使用jQuery。 – Luc 2011-04-26 15:44:06

你可以做这个服务器端，或者因为你使用HTML 5，并假设你有画布可用，你可以在客户端做到这一点。以下是使用HTML 5画布进行客户端操作的一种方法。做它服务器端会根据您使用的语言而有所不同，但技术会类似。

下载这些图片并试用。图像需要与页面位于同一个域中以避免安全错误。除非您更新HTML中的位置，否则它们也应位于相同的目录中。

face1 face2 face3 frame

页面加载后，单击面和随机标记将使用所提供的帧图像被创建并添加到谷歌地图。

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>

由于Matthew Crumley从here的toDataUrl代码。

来源

2011-04-28 19:51:31 DMKing

完美!!!!!!非常感谢。 – Luc 2011-04-30 16:51:32

如何创建Google Latitude类似标记？

回答

相关问题