Google map 上的默认标记非得是一个小图标，无法再标记上加入文字，这在很多时候不能满足需要，比如查询酒店的时候，我希望标记能直接把价格显示出来。我做了一个自定义的类，来满足这种需求。这个类继承自GOverlay，能实现如下图的效果：

下面是这个类的实现代码。

  1. var _index = 1;
  2. function KMarker(latlng, tip, markerContent, clickParamer)
  3. {
  4.     this._latlng = latlng;
  5.     this._tip = tip;
  6.     this._markerContent = markerContent;
  7.     this._clickParamer = clickParamer;
  8. }
  9. KMarker.prototype = new GOverlay();
  10. KMarker.prototype.initialize = function(map_) {
  11.     var markerHtml = document.createElement('div');
  12.     markerHtml.setAttribute("index", this._clickParamer["index"]);
  13.     markerHtml.innerHTML = this._markerContent;
  14.     markerHtml.style.position = "absolute";
  15.     map_.getPane(G_MAP_MARKER_PANE).appendChild(markerHtml);
  16.     var markerTip = document.createElement("div");
  17.     markerTip.innerHTML = this._tip;
  18.     markerTip.style.position = "absolute";
  19.     markerTip.style.display = "none";
  20.     this._map = map_;
  21.     map_.getPane(G_MAP_MARKER_PANE).appendChild(markerTip);
  22.  
  23.     GEvent.addDomListener(markerHtml, "click", function() {
  24.         if (markerTip.style.display == "none") {
  25.             _mapPage.viewHotelMarker(markerHtml.getAttribute("index"));
  26.         } else {
  27.             _mapPage.hiddenHotelMarker(markerHtml.getAttribute("index"));
  28.         }
  29.     });
  30.     GEvent.addDomListener(markerTip, "click", function() {
  31.         if (markerTip.style.display == "none") {
  32.             _mapPage.viewHotelMarker(markerHtml.getAttribute("index"));
  33.         } else {
  34.             _mapPage.hiddenHotelMarker(markerHtml.getAttribute("index"));
  35.         }
  36.  
  37.     });
  38.     GEvent.addDomListener(markerHtml, "mouseover", function() {
  39.         _index++;
  40.         markerTip.style.zIndex = _index;
  41.         markerHtml.style.zIndex = _index;
  42.     });
  43.     GEvent.addDomListener(markerTip, "mouseover", function() {
  44.         _index++;
  45.         markerTip.style.zIndex = _index;
  46.         markerHtml.style.zIndex = _index;
  47.  
  48.     });
  49.     this._markerHtml = markerHtml;
  50.     this._markerTip = markerTip;
  51. };
  52. KMarker.prototype.remove = function() {
  53.     this._markerHtml.parentNode.removeChild(this._markerHtml);
  54.     this._markerTip.parentNode.removeChild(this._markerTip);
  55. };
  56. KMarker.prototype.copy = function() {
  57.     return new (this._latlng,this._tip,this._markerContent,this._clickParamer);
  58. };
  59. KMarker.prototype.redraw = function(force) {
  60.     if (force)
  61.     {
  62.         var p = this._map.fromLatLngToDivPixel(this._latlng);
  63.         this._markerHtml.style.left = (p.x) + "px";
  64.         this._markerHtml.style.top = (p.y) - 25 + "px";
  65.         this._markerTip.style.left = (p.x) + 16 + "px";
  66.         this._markerTip.style.top = (p.y) - 24 + "px";
  67.     }
  68. };
  69.  
  70. KMarker.prototype.getMarkerHtml = function() {
  71.     return this._markerHtml;
  72. }
  73.  
  74. KMarker.prototype.getMarkerTip = function() {
  75.     return this._markerTip;
  76.  

使用方式：

var marker=new KMarker(new GLatLng(Number(hotel.latitude), Number(hotel.longitude)), tipTemp, markerTemp, {"index": index});

map.addOverlay(marker);

 第一个参数是GLatLng类的一个对象，也就是该标记所在经纬度位置。tipTemp是标记的打开后的HTML模板，markerTemp是标记的HTML模板。{"index": index}是标记的编号。

我在上图效果中的模板也发上来,其中id=markerTemp是标记的HTML，id=hotelTemplate的是标记弹出后的HTML。

  1.  <div id="hotelTemplate" style="display:none;">
  2.     <ul class="list clearfix" id="listItem__hotel_passport_" index="_hotel_index_">
  3.         <li class="name">
  4.             <h4>
  5.                 <a href="javascript:" onclick="_mapPage.viewHotelDetail('_hotel_passport_','_hotel_category_name_');">
  6.                     _hotel_name_
  7.                 </a> _star_desc_</h4>
  8.             <span>地址：_hotel_address_</span>
  9.         </li>
  10.         <li class="operate">
  11.             <ul>
  12.                 <li class="markerIndex">_hotel_index_</li>
  13.                 <li class="price">
  14.                     参考价:<em>_hotel_price_</em>
  15.                 </li>
  16.                 <li class="tip">
  17.                     _last_update_time_前
  18.                 </li>
  19.                 <li>
  20.                     <span class="square_button"
  21.                           onclick="_mapPage.viewHotelDetail('_hotel_passport_','_hotel_category_name_');">
  22.                         <b>预订</b>
  23.                     </span>
  24.                 </li>
  25.             </ul>
  26.         </li>
  27.     </ul>
  28. </div>
  29. <div id="markerTemp" style="display:none;">
  30.     <div class="mapMaker _COLOR_">
  31.         <div class="left">_LISTINDEX_</div><div class="right"><span class="inner">_HOTELPRICE_</span></div>
  32.     </div>
  33. </div>

可以通过下面的链接看看实际的效果：

http://t2.shuihuan.com      输入城市，选择地图搜索会出来。

Tags: google Map Api  
发布:karry | 分类:Google Map API | 评论:4 | 引用:0 | 浏览: