Google Map Api(V2) 使用笔记

1.初始化:
     var map;//地图
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));//map_canvas为容器Id
  //添加控件
        //map.addControl(new GLargeMapControl());
        //map.addControl(new GMapTypeControl());
       // map.addControl(new google.maps.LocalSearch(), 
        //new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10, 20)));
    }
    var centerLaLngt = new GLatLng(centerLatLng);  
    map.setCenter(centerLatLng, 14);
2.点击地图获得坐标:
 GEvent.addListener(map, "click", function(e1, e2, e3) {
            document.getElementById("lnglat").innerHTML = e2;
        })
3.函数调用:
  var activeLatlng;//当前活动坐标
    function createMarker(data) {
        var c_pt = new GLatLng(data.latlng[0], data.latlng[1]);
        var marker = new GMarker(c_pt, { draggable: true });
        var myHtml = getWindowInfo(data);

        GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(myHtml);
        });
        GEvent.addListener(marker, "dragstart", function(e) {//鼠标拖动开始
            activeLatlng = e;
            map.closeInfoWindow();
        });
        GEvent.addListener(marker, "dragend", function(e) {//鼠标拖动结束
            for (var i = 0; i < gMapData.length; i++) {
                if ((gMapData[i].latlng[0] == activeLatlng.lat())
                && (gMapData[i].latlng[1] == activeLatlng.lng())) {
                    gMapData[i].latlng = [e.lat(), e.lng()];
                    for (var j = 0; j < allmarkers.length; j++) {
                        if (allmarkers[j].getLatLng().lat() == activeLatlng.lat()
                            && allmarkers[j].getLatLng().lng() == activeLatlng.lng()) {
                            allmarkers.splice(j, 1);
                            var mk = createMarker(gMapData[i]);
                            allmarkers.push(mk);
                            mk.openInfoWindowHtml(getWindowInfo(gMapData[i]));
                            break;
                        }
                    }
                    break;
                }
            }
        });
        return marker;
    }

    function addEmptyMarker(pt, isUpdate) {//添加一个无内容marker
        var marker = new GMarker(pt, {
            draggable: true,
            icon: new GIcon(iconData)
        });
        var myHtml = getEmptyWindowInfo(pt, {
            "nameId": new Date().getTime(),
            "isUpdate": isUpdate
        });
        GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(myHtml);
        });
        GEvent.addListener(marker, "dragstart", function() {
            map.closeInfoWindow();
        });
        GEvent.addListener(marker, "dragend", function() {
            marker.openInfoWindowHtml(myHtml);
        });

        //marker.bindInfoWindowHtml(myHtml);
        map.addOverlay(marker);
        marker.openInfoWindowHtml(myHtml);
    }
//点击土地添加时设置infowindow内容
    function getWindowInfo(obj) {
    }
    function getEmptyWindowInfo(pt, ids) {
    }
    /*
    pt:数组 删除marker
    */
    function deleteMarker(pt) {
        for (var i = 0; i < gMapData.length; i++) {
            if ((gMapData[i].latlng[0] == pt[0])
                && (gMapData[i].latlng[1] == pt[1])) {
                gMapData.splice(i, 1);
                for (var j = 0; j < allmarkers.length; j++) {
                    if (allmarkers[j].getLatLng().lat() == pt[0]
                    && allmarkers[j].getLatLng().lng() == pt[1]) {
                        allmarkers.splice(j, 1);
                        break;
                    }
                }
                break;
            }
        }
    }
    function showUpdate(pt) {
        for (var j = 0; j < allmarkers.length; j++) {
            if (allmarkers[j].getLatLng().lat() == pt[0]
                    && allmarkers[j].getLatLng().lng() == pt[1]) {
                var inf = getInfoByPt(pt);
                allmarkers[j].openInfoWindowHtml(getEmptyWindowInfo(allmarkers[j].getLatLng(),
                {
                    isUpdate: true,
                    nameId: new Date().getTime(),
                    Data: inf
                }));
            }
        }
        return false;
    }
//标记地图
    function markMap() {
        map.clearOverlays();
        allmarkers = [];
        for (var i = 0; i < gMapData.length; i++) {
            var m = createMarker(gMapData[i]);
            allmarkers.push(m);
            map.addOverlay(m);
        }
    }
    var listener;
//开始标记
    function beginMark() {
        listener = GEvent.addListener(map, "click", function(e2, e) {
            addEmptyMarker(e, false);
        });
    }
//结束标记
    function endMark() {
        GEvent.removeListener(listener);
    }
    /*
    pt:数组
    */
    function deleteM(pt) {
        if (confirm("确定删除?")) {
            deleteMarker(pt);
            //更新服务器 action=delete
            markMap();
        }
        return false;
    }
    function test() {
        markMap()
    }
//根据latlng获得信息
    function getInfoByPt(pt) {
        for (var i = 0; i < gMapData.length; i++) {
            if ((gMapData[i].latlng[0] == pt[0])
                && (gMapData[i].latlng[1] == pt[1])) {
                return gMapData[i];
            }
        }
        return null;
    }
    function add(pt, e) {
        var markInfo = {
            "name": e.value,
            "latlng": pt,
            "address": "HangZhss",
            "tel": "123s2",
            "email": "x@live.com"
        };
        gMapData.push(markInfo);
        //更新服务器 action=add
        markMap();
    }

    function update(pt, e) {
        for (var j = 0; j < allmarkers.length; j++) {
            if (allmarkers[j].getLatLng().lat() == pt[0]
                    && allmarkers[j].getLatLng().lng() == pt[1]) {
                var inf = {
                    "name": e.value,
                    "latlng": pt,
                    "address": "浙江杭州",
                    "tel": "12345",
                    "email": "X@live.com"
                };
                //alert(inf.name)
                var infoStr = getWindowInfo(inf);
                allmarkers[j].openInfoWindowHtml(infoStr);

                for (var i = 0; i < gMapData.length; i++) {
                    if ((gMapData[i].latlng[0] == pt[0])
                && (gMapData[i].latlng[1] == pt[1])) {
                        gMapData[i].name = e.value;
                        gMapData[i].latlng = pt;
                        gMapData[i].address = "add";
                        gMapData[i].tel = "9877546";
                        gMapData[i].email = "x@live.com";
                        break;
                    }
                }
                break;
            }
        }
        markMap();
    }
最终效果:
 
 

posted on 2010-12-22 17:04  jh_x  阅读(1182)  评论(2编辑  收藏  举报

导航