blog | 业余项目 | 关于Karry | RSS订阅 | 我在阅读 | 管理

Archive for the ‘Google Map API’ Category

Dict–我的chrome词典插件

星期六, 五月 22nd, 2010

DICT前段时间Kevin做了一个很不错的翻译工具–尚译,使用的是google language api,用起来感觉很方便。由于是油猴脚本(Grease Monkey),每次使用都要在导航栏点击一次。 另外,这个脚本主要侧重于翻译,对于我自己并不是很适用,决定做一个适合自己使用的chrome词典小插件,关注单词的发音和用法,顺便也学习一下Google Chrome Extensions 的开发。

我将这个插件命名为”Dict”,基于google language api 、 dict.cn和有道词典,中文翻译为英文,单词和词组有音标和例句和发音,其他语言翻译成中文。现在工作中偶尔也要用到日文,所以也附带做了简单的日文翻译功能。

一开始就为了满足自己的需求而开发,所以这个插件不一定适合你,如果你恰好和我有相似的需求,也欢迎你使用。

用google chrome 浏览器打开: chrome词典小插件

点击安装之后你会在浏览器右上角看到一个红色的小图标。点击红色小图标:

输入你要查询的单词,回车:

鼠标放在黄色的喇叭按钮上,会有单词的读音。你也可以输入中文:

Dictionary-chrome 小插件

如果你觉得单词的解释和例句不够完整,可以点击右下角的”google dictionary” 在google提供的词典中查看更加完整的信息。

你也可以输入整句获得翻译,当然,句子是没有发音和音标的:

正在考虑是否加上屏幕取词的功能,可能下一个版本加上该功能,对这个插件有任何建议也欢迎和我交流。

Google Map上自定义标记类(继承自GOverlay)

星期四, 三月 26th, 2009

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      输入城市,选择地图搜索会出来。

Google Map Api和GOOGLE Search Api整合

星期一, 十二月 1st, 2008

 将GOOGLE MAP API 和 GOOGLE Search API 进行整合,我用面向对象的方式写了一个类,通过传一个经纬度进去,自动通过GOOGLE LOCAL SEARCH获取附近的相关信息。比如餐厅、景点等,反过来标到地图上,并可在任意容器内显示。

下面是源码:

 /*
*Author:karry
*Version:1.0
*Time:2008-12-01
*KMapSearch 类
*把GOOGLE MAP 和LocalSearch结合。只需要传入MAP\经纬度值,就可以把该经纬度附近的相关本地搜索内容取出来,在地图上标注出来,并可以在指定容器显示搜索结果
*/

(function() {
    var markers= new Array();
    var KMapSearch=window.KMapSearch= function(map_, opts_) {
        this.opts = {
            container:opts_.container || "divSearchResult",
            keyWord:opts_.keyWord || "餐厅",
            latlng: opts_.latlng || new GLatLng(31, 121),
            autoClear:opts_.autoClear || true,
            icon:opts_.icon || new GIcon(G_DEFAULT_ICON)
        };
        this.map = map_;
        this.gLocalSearch = new google.search.LocalSearch();
        this.gLocalSearch.setCenterPoint(this.opts.latlng);
        this.gLocalSearch.setResultSetSize(GSearch.LARGE_RESULTSET);
        this.gLocalSearch.setSearchCompleteCallback(this, function() {
            if (this.gLocalSearch.results) {
                var savedResults = document.getElementById(this.opts.container);
                if (this.opts.autoClear) {
                    savedResults.innerHTML = "";
                }
                for (var i = 0; i < this.gLocalSearch.results.length; i++) {
                    savedResults.appendChild(this.getResult(this.gLocalSearch.results[i]));
                }
            }
        });
    }
    KMapSearch.prototype.getResult = function(result) {
        var container = document.createElement("div");
        container.className = "list";
        var myRadom =(new Date()).getTime().toString()+Math.floor(Math.random()*10000);
        container.id=myRadom;
        container.innerHTML = result.title + "<br />地址:" + result.streetAddress;
        this.createMarker(new GLatLng(result.lat, result.lng), result.html,myRadom);
        return container;
    }
    KMapSearch.prototype.createMarker = function(latLng, content)
    {
        var marker = new GMarker(latLng, {icon:this.opts.icon,title:this.opts.title});
        GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(content);
        });
        markers.push(marker);
        map.addOverlay(marker);
    }
    KMapSearch.prototype.clearAll = function() {
        for (var i = 0; i < markers.length; i++) {
            this.map.removeOverlay(markers[i]);
        }
        markers.length = 0;
    }
    KMapSearch.prototype.execute = function(latLng) {
        if (latLng) {
            this.gLocalSearch.setCenterPoint(latLng);
        }
        this.gLocalSearch.execute(this.opts.keyWord);
    }
})();

使用方法:

 var myIcon = new GIcon(G_DEFAULT_ICON);
            myIcon.image = "canting.png";
            myIcon.iconSize = new GSize(16, 20);
            myIcon.iconAnchor = new GPoint(8, 20);
            myIcon.shadow = "";
            var mapSearch = new KMapSearch(map, {container:"cantingContainer",latlng:initPt,icon:myIcon,keyWord:"餐厅"});
            mapSearch.clearAll();
            mapSearch.execute();

点击这里查看演示示例:经纬度查询整合本地搜索

经纬度查询工具

星期天, 八月 17th, 2008

方便的经纬度查询工具,快速查询你所在地的经纬度,基于google map,点击查看

现在还添加了测距功能。

Google Map Api 中使用 Google Ditu API 的数据

星期三, 七月 30th, 2008

 

由于中国法律的原因,google ditu的 中文版独立于google map 英文版之外。成为了一个单独的系统。其发布的API 也是两套,在google ditu 里面,你无法看到中国大陆以外地区的详细地图。但在google map 里面对中国地区的信息只看得到城市的名字,最近好像在上海、北京等地区有了详细地图,但这远远不够。

由于公司的客户酒店遍布世界,怎样在google ditu 和google map 之间合理的切换是很重要的。

让google map 的模式加了一个CHINA 模式,默认调用google map api,在点击CHINA 模式时,切换到google ditu 状态。当然也可以用程序通过当前城市来自动判断。

以下是代码原型:

<html>
<head>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key="
type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var dituMapType = null;
function load() {
    map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(39.9208, 116.4001), 13); // 指定地图中心为北京市的
    // 经纬度
    var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-90, -180),new GLatLng(90, 180)),0);
    var copyrightCollection = new GCopyrightCollection();
    copyrightCollection.addCopyright(copyright);
    var dituTileLayer = new GTileLayer(copyrightCollection, 1, 17);
    dituTileLayer.getTileUrl = function(tile, zoomlevel,x) {
        var url = G_NORMAL_MAP.getTileLayers()[0].getTileUrl(tile,zoomlevel,x);
        var bits = url.split("&");
        bits[1] = "http://servicetile.mapabc.com/googlechina/maptile?" + bits[1];
        /**bits[1] = "http://mapgoogle.mapabc.com/googlechina/maptile?" + bits[1];**/
        bits.shift();
        url = bits.join("&");
        return url;
    };

    //新建地图类型
    dituMapType = new GMapType([dituTileLayer],new GMercatorProjection(23), "Ditu", { shortName: "ditu", alt: "Show maps from Google China" });
    map.addMapType(dituMapType);
}
function changeType()
{
    map.setMapType(dituMapType);
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 600px; height: 400px"></div>
<input type="button" value="change" onclick="changeType()" />
</body>
</html>

GoogleMap 上添加自定义图层覆盖(继承自GOverlay)

星期五, 六月 27th, 2008

/*Rectangle类,添加自定义的DIV图层 ====================================================================
*author Karry@derbysoft.com
*继承自GOverlay();
*矩形是在地图上勾勒经纬边界的简单叠加层,其边界已指定
*粗细和颜色,并(可选)可以使用半透明背景颜色.
*/
function Rectangle(point, opt_boldWeight, opt_color, opt_weigth, opt_height, opt_bgColor) {
    this.point_ = point;
    this.boldWeight_ = opt_boldWeight || 1;
    this.color_ = opt_color || "#888888";
    this.weight_ = opt_weigth || "50px";
    this.height_ = opt_height || "30px";
    this.bgColor_ = opt_bgColor || "#FFF";
}
Rectangle.prototype = new GOverlay();
// 创建表示此矩形的 DIV.
Rectangle.prototype.initialize = function(map) {
    // 创建表示我们的矩形的 DIV
    var div = document.createElement("div");
    div.style.border = this.boldWeight_ + "px solid " + this.color_;
    div.style.position = "absolute";
    div.style.background.style = "#FFF";
    div.style.width = this.weight_;
    div.style.height = this.height_;
    div.style.background = this.bgColor_;
      // 与地图信息窗口相同,在地图的最上方
    map.getPane(G_MAP_FLOAT_PANE).appendChild(div);
    $(div).html("<input type=\"button\" value=\"添加\" />")
    this.map_ = map;
    this.div_ = div;
}

//从地图面板删除 DIV
Rectangle.prototype.remove = function() {
    this.div_.parentNode.removeChild(this.div_);
}

// 将我们的数据复制到新的矩形
Rectangle.prototype.copy = function() {
    return new Rectangle(this.point_, this.boldWeight_, this.color_, this.weight_, this.height_, this.bgColor_);
}

// 基于当前投影和缩放级别重新绘制矩形
Rectangle.prototype.redraw = function(force) {
    // We only need to redraw if the coordinate system has changed
    if (!force) return;
      // 现在基于边界的 DIV 坐标放置 DIV
    this.div_.style.left = (this.point_.x – this.boldWeight_) + "px";
    this.div_.style.top = (this.point_.y – this.boldWeight_ – 20) + "px";
}
/*
*Rectangle类结束============================================================================
*/

 

使用方式:

 map.addOverlay(new Rectangle(new GPoint(31.22395859822874,121.47857666015625)));

Google Map 上添加自定义按钮(继承自GControl类)

星期四, 六月 26th, 2008

Blog 开张第一贴
继承自GControl()类

/*TextControl类 ============================================================================
*author Karry
*添加按钮扩展,
*继承自GControl()
*value–按钮的value 值
*left–按钮与左边框的距离(像素)
*top–按钮与上边框的距离(像素)
*/
        function TextControl(value,left,top,clickFunction) {
            this.value_ = value||"按钮";
            this.left_ = left||77;
            this.top_ = top||7;
            this.clickFunction_ = clickFunction;
        }
        TextControl.prototype = new GControl();
        TextControl.prototype.initialize = function(map)
        {
            var container = document.createElement("div");
            var containerDiv = document.createElement("div");
            this.setButtonStyle_(containerDiv);
            container.appendChild(containerDiv);
            containerDiv.appendChild(document.createTextNode(this.value_));
            GEvent.addDomListener(containerDiv, "click", this.clickFunction_);
            this.map_ = map;
            this.map_.getContainer().appendChild(container);       
            return container;
        }
        TextControl.prototype.getDefaultPosition = function()
        {
            return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(this.left_,this.top_));
        }
        TextControl.prototype.setButtonStyle_ = function(button)
        {
            button.style.color = "#000000";
            button.style.backgroundColor = "white";
            button.style.font = "12px ‘宋体’";
            button.style.border = "1px solid black";
            button.style.padding = "2px";
            button.style.marginBottom = "3px";
            button.style.textAlign = "center";
            button.style.width = "4em";
            button.style.cursor = "pointer";
        }

/*TextControl类 end============================================================================*/

使用方法:

map.addControl(new TextControl("返回",77,7,load));