在asp.net中使用谷歌地图

<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");
    }


简介<br><br>很多人都知道Google Earth(Google Map),其实,Google为我们自己开发应用程序提供了丰富的API,我们只要具备一些JavaScript的知识,就完全可以利用它们。但是,对于我来说,在ASP.NET页面使用JavaScript来调用Google Map的API有一定难度,尤其是利用服务器端函数来动态画出Google Map。例如,我想从SQL Server读取经纬度信息,然后在Google Map插入一个点。如果熟悉AJAX的话,很快就能得出答案。我们必须用JavaScript调用ASP.NET服务器端函数,利用得到的数据来绘制Google Map。简单吧?其实,对于我来说并非如此。因此,我决定开发一个用户控件来处理JavaScript代码,这样,我就能集精力于服务器端函数了。<br><br> <br><br>特点<br><br>1.不需要JavaScript知识就能绘制Google Maps,只需在相应页面加入自定义控件即可。<br><br>2.使用AJAX调用来获取服务器端数据。<br><br>3.提供最优越的性能表现。<br><br> <br><br>如何使用<br><br>在这里,我并不想解释我是如何创建该控件的。我只要教你如何使用它。<br><br> <br><br>系统需求<br><br>1.Visual Studio 2005或更高版本<br><br>2.Microsoft ASP.NET AJAX Extensions支持<br><br>3.Internet Explorer 7.0或Mozilla Firefox 2.x<br><br> <br><br>你只需完成以下几步:<br><br>1.新建一个ASP.NET AJAX-Enabled Website。<br><br>2.将源代码App_Code文件夹、GoogleMapForASPNet.ascx、GoogleMapForASPNet.ascx.cs,GService.asmx复制到你的ASP.NET应用程序下。<br><br>3.保证你的网站支持AJAX技术。<br><br>4.打开Default.aspx(或任何你想加入Google Map的位置),将该自定义控件拖放至相应位置并编译,这样就实现了最简单的带有Google Map的ASP.NET网页。<br><br> <br><br>现在我们来为Google Map加一些标注点。在Page_Load()事件加入一些代码。<br><br> <br><br>向Google Map控件传参<br><br> <br><br>注意:使用时必须首先设定你的Google Maps API key(可以从Google免费获取)。<br><br>以下是代码:<br><br>if (!IsPostBack)<br>{<br> GoogleMapForASPNet1.GoogleMapObject.APIKey = "<YourGoogleMapKey>"; //定义你的Google Maps API key<br><br> GoogleMapForASPNet1.GoogleMapObject.APIVersion = "2"; //选择Google Maps API版本<br><br> GoogleMapForASPNet1.GoogleMapObject.Width = "800px";<br> GoogleMapForASPNet1.GoogleMapObject.Height = "600px"; //定义Google Map控件的大小<br><br> GoogleMapForASPNet1.GoogleMapObject.ZoomLevel = 14; //定义缩放级别,默认值为3<br><br> GoogleMapForASPNet1.GoogleMapObject.CenterPoint = new GooglePoint("CenterPoint", 31.19, 120.37); //定义地图心位置<br><br> GoogleMapForASPNet1.GoogleMapObject.Points.Add(new GooglePoint("1", 31.19, 120.37)); //在指定经纬度定义新的地图标注点<br><br>}<br><br>这样,就能自定义地图加载位置和标注点了。<br><br> <br><br>自定义标注点图标<br><br> <br><br>该控件支持自定义标注点图标。首先,将图标文件复制到你的网站目录下,接着,使用以下赋值语句:<br><br> GP.IconImage = "icons/pushpin-blue.png";<br><br>还可以为标注点添加注释,当用户单击标注点时,能看到注释内容。代码:<br><br> GP.InfoHTML = "这是一个标注点";<br><br> <br><br>至此,已经介绍了使用Google Maps Control的基本内容。接下来,我们来看一下它的高级功能。例如,当用户进行某些操作时移动标注点。<br><br> <br><br>创建交互式地图<br><br> <br><br>该控件支持用户创建交互式地图。下面这个例子是,当用户单击按钮时,移动标注点。以下是使用方法:<br><br> <br><br>1.插入一个Button控件,在它的Click事件加入以下代码:<br><br> protected void Button1_Click(object sender, EventArgs e)<br> {<br> GoogleMapForASPNet1.GoogleMapObject.Points["1"].Latitude += 0.003;<br> GoogleMapForASPNet1.GoogleMapObject.Points["1"].Longitude += 0.003;<br> }<br><br> 可以自主控制经纬度的增量。<br><br>2.运行该页面,你将发现整个页面都会被刷新或回传。为了避免这种现象,我们只需要把这个Button控件加入UpdatePanel控件。<br><br>3.重新运行该页面,可看到该页面已经一切正常了。<br><br><br><br>自动更新和GPS导航<br><br><br><br>我们可以使用AJAX框架的Timer控件来实现这一功能。在Timer_Tick()事件,可以定义标注点新的经度和纬度。这样,在指定的时间间隔后,地图上所有的标注点都会自动更新。你也可以连接到GPS设备,构成一个GPS导航系统。<br><br><br><br>使用Google Maps Control绘制折线<br><br><br><br>1.首先,添加该折线的各个端点。代码如下:<br><br> GooglePoint GP1 = new GooglePoint();<br> GP1.ID = "GP1";<br> GP1.Latitude = 31.19; //定义标注点纬度<br> GP1.Longitude = 120.37; //定义标注点纬度<br> GP1.InfoHTML = "这是标注点1"; //可选注释项<br> GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP1); //在地图上添加这个点<br><br> GooglePoint GP2 = new GooglePoint();<br> GP2.ID = "GP2";<br> GP2.Latitude = 31.19001;<br> GP2.Longitude = 120.37001;<br> GP2.InfoHTML = "这是标注点2";<br> GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP2);<br><br> GooglePoint GP3 = new GooglePoint();<br> GP3.ID = "GP3";<br> GP3.Latitude = 31.19003;<br> GP3.Longitude = 120.36998;<br> GP3.InfoHTML = "这是标注点3";<br> GoogleMapForASPNet1.GoogleMapObject.Points.Add(GP3);<br><br>2.利用这些点绘制折线<br><br> GooglePolyline PL1 = new GooglePolyline(); //定义折线<br> PL1.ID = "PL1";<br> PL1.ColorCode = "#0000FF"; //定义折线颜色<br> PL1.Width = 5; //定义折线宽度<br><br> PL1.Points.Add(GP1); //加入这些点(绘制折线)<br> PL1.Points.Add(GP2);<br> PL1.Points.Add(GP3);<br><br>3.将折线加入Google Maps Control<br><br> GoogleMapForASPNet1.GoogleMapObject.Polylines.Add(PL1);<br><br><br><br><br><br>使用Google Maps Control绘制多边形<br><br><br><br>1.按照上面的方法加入多边形各顶点。这里不再赘述。<br><br>2.使用这些点创建一个多边形。代码如下:<br><br> GooglePolygon PG1 = new GooglePolygon(); //定义多边形<br> PG1.ID = "PG1";<br> PG1.FillColor = "#0000FF"; //定义多边形各条边的颜色<br> PG1.FillOpacity = 0.4;<br><br><br> PG1.Points.Add(GP1); //将上面创建的各点加入多边形(作为顶点)<br> PG1.Points.Add(GP2);<br> PG1.Points.Add(GP3);<br> ……………………………………<br><br> PG1.Points.Add(GPn); //第n个顶点<br><br>3.将多边形加入Google Maps Control<br><br> GoogleMapForASPNet1.GoogleMapObject.Polygons.Add(PG1);<br>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值