201204231443利用 Canvas 製作 Google Maps API Marker Icon

問題出在需要在 Marker Icon 上加數字,從 1 到 99 。指明這是第幾個 Marker 。以往都是乖乖做 99 張圖。連 Google Maps API 的範例都是乖乖做 99 張圖

現在想想這應該用 Canvas 做,兜起來就長下面這樣吧:

DEMO

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false" ></script>
<div id="map" style="height : 640px; width : 640px" ></div>
<script>
(function() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center : new google.maps.LatLng(25, 121),
    mapTypeId : google.maps.MapTypeId.ROADMAP,
    zoom : 4
  });
  
  var image = new Image();
  
  image.onload = function() {
    var w = this.width,
        h = this.height;
  
    for(var i = 1; i <= 5; ++i) {
      var canvas = document.createElement('canvas'),
          context = canvas.getContext('2d');
        
      canvas.width = w;
      canvas.height = h;
      context.drawImage(this, 0, 0, w, h);
      context.textAlign = 'center';
      context.fillText(i, w / 2, h / 2);
      
      new google.maps.Marker({
        icon : canvas.toDataURL(),
        map : map,
        position : new google.maps.LatLng(25, 105 + i * 5)
      });
    }
  };
  
  image.src = 'pointer.png';
})();
</script>

範例看不到換個新一點的瀏覽器吧。

要支援 IE8 與以下,就要來研究一下 ExplorerCanvas

麻煩的是 ExplorerCanvas 支援 fillText 的版本始終沒有放出來。

但網路上已經有人把 ExplorerCanvas 支援 fillText 該加上的 JavaScript 寫出來了,「ExplorerCanvas fillText 添加 - Google 搜尋」。

看起來也和 ExplorerCanvas 想做的方向一致,就是用 VML 達成。

但是寫出來的 JavaScript 沒支援 textAlign ,而 VML 是有這個屬性的 - VML V-Text-Align Attribute

所以整理一下,修改一下,問題應該就可以解決。

延伸
回應
Google 站內搜尋
BloggerAds
累積 | 今日
loading......
    沒有新回應!





Powered by Xuite