google map api 实现的简单的 ppgis

采用web.config配置数据库连接信息

采用ado.net连接数据库

但是设计上几乎没有的一个简单的demo

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>张郡的GoogleMapAPIs学习网站</title>

    <script src="http://ditu.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAALbLwnf-C_0-x3fCqFAZNuhRPkUy03xyR4-LYhFr43h_0cozg4RRnRTc-vNDXI7GkVDAD_GkgahTEag"
        type="text/javascript">
    </script>

    <script type="text/javascript">
   
    //<![CDATA[
    var map;     //全局GMap2对象
    var marker;  //用于标识查询IP的GMarker地标

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(39.917, 116.397), 14);
       
        //添加相应GControl()控件
        map.addControl(new GLargeMapControl());
        //map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.addControl(new GScaleControl());
        map.addControl(new GOverviewMapControl());
        map.enableScrollWheelZoom(); 
       
        //设定地图类型为混合地图
        map.setMapType(G_HYBRID_MAP);
    
 
          //定义一个经纬度点
          var point = new GLatLng(39.93593,  116.38384);
          var options = { title: "这是北师大"};
        
          //定义一个标注对象
          var marker = new GMarker(point,options);
          map.addOverlay(marker);
 
           var pan = document.getElementById("Panel1"); 
           marker.bindInfoWindow(pan);
          
           //点击气泡时候
          GEvent.addListener(marker,"click",function(){ 
                 show();
            });
           
          
          //定义一个经纬度点
          var point2 = new GLatLng(39.93561, 116.40504);
          //定义一个标注对象
          var marker2 = new GMarker(point2);
          //定义字符串
          var info2 = "这是中央戏剧学院<br/><font color='red'>东棉花胡同2号</font>";
          //设置点击出现冒泡
          marker2.bindInfoWindowHtml(info2);
          //在地图上加入标注
          map.addOverlay(marker2);
         
       
        //单击地图时弹出点击点的坐标  
            GEvent.addListener(map,"click",function(overlay,latlng){  
                    if(latlng){  
                        document.getElementById("tt").value = "经度:"+Math.round(latlng.lng()*100000)/100000+" "+"纬度:"+Math.round(latlng.lat()*100000)/100000;  
                    }  
                });
      }
    }
   
    function show()
    {
        //document.getElementById("Panel1").style.display='block';

        var txt = document.getElementById("TextBox1");
          txt.value="";
         var txt = document.getElementById("TextBox2");
          txt.value="";
   
    }
   
    //]]>
    </script>

    <style type="text/css">
        #tt
        {
            484px;
        }
    </style>
</head>
<body onload="load()" onunload="GUnload()">
   
    <form id="form1" runat="server">
    <div>
    </div>
   
    <div id="map" style=" 800px; height: 600px">
    </div>
   
    <input type="text" id="tt" maxlength="500" />
    <asp:Panel ID="Panel1" runat="server">
        <asp:Label ID="Label1" runat="server" Text="这是北师大,请您打分(假设清华是100分)"></asp:Label>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
        <asp:Label ID="Label2" runat="server" Text="您的名字:"></asp:Label>
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="提交" onclick="Button1_Click1" />
    </asp:Panel>

   
    </form>
   
       
</body>
</html>

原文地址:https://www.cnblogs.com/zhangjun1130/p/1800842.html