Google Map and Map Search 学习

阅读更多

谈起google map,只是众多google API中的一支，在网络上也随处可以找到很多关于google map的介绍，本文主要目的把自己对google map的认识做一小结，本文需要一定的开发google map的基础，如果是新手话我建议去google map官方一步步学习其开发过程http://www.codechina.org/doc/google/gmapapi/#The_Hello_World_of_Google_Maps

主要包括google map的实现的基本方法和一些扩展功能。

1.在HTML中加入引用文件，key=abcdef是google map需要的key,本机测试可以用abcdef，发布在服务器时必须自己去google申请一个key.

 
在body中加入一个显示地图的div

Loading...

2.在JS文件中实现加载地图
var mapElem = document.getElementById("googleMap");//获取初始化地图的位置
        map = new GMap2(mapElem);
        map.enableScrollWheelZoom();
        geocoder = new GClientGeocoder();//加入缩放图标
        var customUI = map.getDefaultUI();
        customUI.maptypes.hybrid = false;
        map.setUI(customUI);

3.给实例化好的地图添加事件
GEvent.addListener(map, "Event", function(oldLevel, newLevel) {
          //do something
     });

Event:click、dblclick、singlerightclick、movestart、move、moveend、zoomend、addoverlay、drag、load还有好多，可以参考Google 地图 API 参考。

4.实现拖拽标志过程中显示当前标志的经纬度，在创建标志的时候
function createMarker(markPoint) {
            var marker = new GMarker(markPoint, { draggable: true });
            GEvent.addListener(marker, "dragend", function(latlng) {
   var e_lat = latlng.lat(); //拖放后纬度
                var e_lng = latlng.lng(); //拖放后经度
                $(".LgtInput").val(e_lat); //赋值给前台的label
                $(".LitInput").val(e_lng);
            });
            GEvent.addListener(marker, "drag", function(latlng) {
                var e_lat = latlng.lat(); //拖放后纬度
                var e_lng = latlng.lng(); //拖放后经度
                $(".LgtInput").val(e_lat);
                $(".LitInput").val(e_lng);

            });
            return marker;
        }


5.在地图上画出两点之间的行车路线,参数：实例化的地图，出发点，目的地
function setDirection(map,fromAddr,toAddr)

{
var gdir = new GDirections(map);
var geocoder = new GClientGeocoder();
geocoder.getLocations(fromAddr,
function(json){
if (!json)
{
alert("解析\""+address+"\"错误");
}
else{
var addressRoute ="from:"+address+"@"+json.Placemark[0].Point.coordinates[1]

+","+json.Placemark[0].Point.coordinates[0]

+" to:"+toAddr+"@";
gdir.load(addressRoute,{travelMode:G_TRAVEL_MODE_DRIVING});
}
});
}


6.使用google local search,虽然google map API提供了地图搜索的插件，但是搜索框是google样式的，作为产品当然是不允许的，所以自己实现输入框和搜索按钮，用JS实现调用google lacol search的功能。

$(".button").click(function() {//给自己实现的按钮添加事件响应
     if ($(".input").val()) {//从输入框得出搜索内容
gLocalSearch.setCenterPoint(map.getCenter());
gLocalSearch.setResultSetSize(GSearch.LARGE_RESULTSET);//索引结果的个数，最少为4个，最大为8个
gLocalSearch.setSearchCompleteCallback(this, function() {
if (gLocalSearch.results) { //遍历搜索结果
   for (var i = 0; i < gLocalSearch.results.length; i++) {
    var title = gLocalSearch.results[i].title.replace(/\<[\/]?b\>/ig, "");
var itemHtml = "

" + localTitle + "" + localAddr + "";

         if (gLocalSearch.results[i].phoneNumbers)
       itemHtml += gLocalSearch.results[i].phoneNumbers[0].number;
                itemHtml+=""+ String.fromCharCode("A".charCodeAt(0) + i) + "

";
//搜索结果的名称，地址，地话等信息打印
alert(itemHtml);

｝
｝
});
       gLocalSearch.execute($(".input").val());//执行搜索操作

        }
    });