谷歌地图

来源：互联网发布：可以编程的手机软件编辑：程序博客网时间：2024/05/18 02:00

<script src="../../../js/json2.js" type="text/javascript"></script>    <!--google离线api使用的是展示页面的当前路径，配置时只能放在当前文件夹-->    <script src="mapfiles/mapapi.js" type="text/javascript"></script>

<script src="../../../js/jquery.js" type="text/javascript"></script>

<!-- 地图展示相关js封装 -->    <script type="text/javascript">        //类工厂，返回一个可以 创建实例时自动执行initialize的类型    var MyClass = {         create: function() {     return function() {     this.initialize.apply(this, arguments);     }    }    };        //创建本地地图类型    function LocalMapType(){    this.tileSize = new google.maps.Size(256, 256);    this.maxZoom = <%=SupplyResourceMapZoom %>-1;   //地图显示最大级别,正常级别-1    this.minZoom = 3;    //地图显示最小级别    this.name = "电子地图";    this.alt = "显示电子地图数据";    this.getTile = function(coord, zoom, ownerDocument) {        var curSize = Math.pow(2,zoom);    var y = tlen(5,coord.y% curSize);    var x = tlen(5,coord.x% curSize);    var vzoom = tlen(1,zoom+1);    //需要配置在配置文件中    var mapPicDir = '<%=SupplyResourceMapURL %>';    var strURL = mapPicDir+"L" + vzoom + "/"+(coord.y+1)+"/" + y + "-" + x + ".jpg";    var img = ownerDocument.createElement("img");    img.style.width = this.tileSize.width + "px";    img.style.height = this.tileSize.height + "px";    img.src = strURL;    return img;        //不足位补0    function tlen(len, mystr){    mystr = String(mystr);    var num = len - mystr.length;    for (var i = 0; i <= num; i++)    {    mystr = "0" + mystr;    }    return mystr;    }    };    }        var GoogleMap=MyClass.create();    GoogleMap.prototype={    //类构造函数    //domId     窗口id属性    //centerX   中心点纬度    //centerY   中心点经度    initialize:function(domId,centerX,centerY,zoom){    //定义地图的中心点        var myLatlng = new google.maps.LatLng(centerX, centerY);        var localMapType=new LocalMapType();    var mapOptions = {    zoom: zoom,    center: myLatlng,    mapTypeControlOptions: {    mapTypeIds: [    /*google.maps.MapTypeId.ROADMAP,    google.maps.MapTypeId.HYBRID,    google.maps.MapTypeId.SATELLITE,    google.maps.MapTypeId.TERRAIN,*/    'localMap' ]  //定义地图类型    },    panControl: true,    zoomControl: true,    mapTypeControl: true,    scaleControl: true,    streetViewControl: true,    overviewMapControl: true    };    //创建map实例    this.map = new google.maps.Map(document.getElementById(domId), mapOptions);    this.map.mapTypes.set('localMap', localMapType);   //绑定本地地图类型    this.map.setMapTypeId('localMap');    //指定显示本地地图    this.map.setOptions({draggable: true});    this.infoWindowArray=[];    this.LatLngArray=[];    },    //添加标注(地图上创建一个点，点击后弹出窗口)    //x  纬度    //y  经度    //htmlCon  窗口显示的html内容    createMarker:function(x,y,htmlCon,title){            var infowindow = new google.maps.InfoWindow({    content:  htmlCon    });        //defined icons    var image = 'images/user.png';    x=parseFloat(x);    y=parseFloat(y);    //是否存在相同的坐标    while(this.isExistLatLng(x,y)){        x=x+0.01;        y=y+0.01;    }        //创建一个点    var myLatLng = new google.maps.LatLng(x,y);    var marker = new google.maps.Marker({    position: myLatLng,    map: this.map,    title: title,    icon: image    });    this.LatLngArray.push([x,y]);    this.infoWindowArray.push(infowindow);    var mapObj=this;    //给点关联点击窗口    google.maps.event.addListener(marker, 'click', function() {      mapObj.colseAllInfoWindow()      infowindow.open(this.map,marker);    });    },    createPoint:function(x,y){    //创建一个跳动的点    var parliament = new google.maps.LatLng(x,y);    var marker = new google.maps.Marker({    map:this.map,    draggable:false,    animation: google.maps.Animation.DROP,    position: parliament    });    google.maps.event.addListener(marker, 'click', toggleBounce);        function toggleBounce() {    if (marker.getAnimation() != null) {    marker.setAnimation(null);    } else {    marker.setAnimation(google.maps.Animation.BOUNCE);    }    }    },    colseAllInfoWindow:function(){        //关闭所有的窗口        for(var i=0;i<this.infoWindowArray.length;i++){                   this.infoWindowArray[i].close();                }    },    isExistLatLng:function(lat,lng){        for(var i=0;i<this.LatLngArray.length;i++){                    if(this.LatLngArray[i][0]==lat&&this.LatLngArray[i][1]==lng){                        return true;                    }                }                return false;    }    };    </script>

 //地图实体    var mapEty=null;    //初始化地图    function InitialMap(data){        InitialMapHeight();        var log=data.Log;        var lat=data.Lat;        var zoom=data.Zoom;        if(log==""){            log="113.140";            lat="23.080";            zoom="5";        }                mapEty=new GoogleMap("map_canvas",parseFloat(lat),parseFloat(log),parseFloat(zoom));        //mapResults=data;        var mapResult=data.rows;        for(var i=0;i<mapResult.length;i++){            var htmlStr=SupplyMsg(mapResult[i]);            mapEty.createMarker(mapResult[i].LAT,mapResult[i].LOG,htmlStr,mapResult[i].ITEMNAME);    }    }    //点击显示信息    function SupplyMsg(obj){        var htmlStr="材料名称:"+obj.ITEMNAME+"<br />";        htmlStr+="资源名称:"+obj.RESOURCENAME+"<br />";        htmlStr+="联系人:"+obj.CONTACTPERSON+"<br />";        htmlStr+="联系电话:"+obj.TEL+"<br />";        htmlStr+="邮箱:"+obj.MAIL+"<br />";        return htmlStr;    }    //ajax获取地图信息    function ajaxGetMapInfo(){        var submitData = getFormSubmitValue($(".tb_input"));        if (objPropertyCount(submitData) < 1) return;        $.post("TechResourceToQuery.ashx",{ action:"QueryMapData",paraData:JSON.stringify(submitData) },function(data){            if(data){                var json=JSON.parse(data);                InitialMap(json);            }        });    }     function InitialMapHeight(){        var windowHeight=$(window).height();        if(windowHeight<300){            windowHeight=300;        }else{            windowHeight=windowHeight-4;        }        $("#map_canvas").css("height",windowHeight+"px");    }

0 0