如何創建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類似標記？

回答

相關問題