Fatal编程技术网
  • javascript/
  • 通过javascript将输入（框）中的数据添加到sql数据库

通过javascript将输入（框）中的数据添加到sql数据库

javascript c# google-maps

通过javascript将输入（框）中的数据添加到sql数据库,javascript,c#,google-maps,Javascript,C#,Google Maps,下面是我的代码，我正在使用javascript中的c代码将输入框“纬度”和“经度”中的数据写入数据库 我只想在按下按钮时插入数据。此代码在初始化时只插入一次数据。按钮单击不会产生任何效果 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Markers.WebForm1" %> <!DOCTYPE html> <html> <hea

下面是我的代码，我正在使用javascript中的c代码将输入框“纬度”和“经度”中的数据写入数据库

我只想在按下按钮时插入数据。此代码在初始化时只插入一次数据。按钮单击不会产生任何效果

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Markers.WebForm1" %>

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
  #google_map {width: 550px; height: 450px;margin-top:50px;margin-left:auto;margin-right:auto;}
</style>
<script type="text/javascript"
 src="https://maps.googleapis.com/maps/api/js?v=3.exp">
</script>
<script type="text/javascript">

    var mapCenter = new google.maps.LatLng(33.650077, 73.034054); //Google map Coordinates
    var map
    var marker
    var marker1


    function initialize() //function initializes Google map
    {
        var googleMapOptions =
        {
            center: mapCenter, // map center
            zoom: 15, //zoom level, 0 = earth view to higher value
            panControl: true, //enable pan Control
            zoomControl: true, //enable zoom control
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL //zoom control size
            },
            scaleControl: true, // enable scale control
            mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
        };
        map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions);
        marker = new google.maps.Marker({
            position: mapCenter,
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            title: "This a new marker!",
            icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
        });
        marker1 = new google.maps.Marker({
            position: mapCenter,
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            title: "This a new marker!",
            icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
        });
        google.maps.event.addListener(marker, 'dragend', function (evt) {
            document.getElementById('latitude').value = evt.latLng.lat();
            document.getElementById('longitude').value = evt.latLng.lng();

        });

        google.maps.event.addListener(marker1, 'dragend', function (evt) {
            document.getElementById('latitude1').value = evt.latLng.lat();
            document.getElementById('longitude1').value = evt.latLng.lng();
        });

    }
    function addMyMarker() { //function that will add markers on button click
        <%    Markers.DataClasses1DataContext db = new Markers.DataClasses1DataContext();%>
        <%    Markers.LocationDataPacket l = new Markers.LocationDataPacket(); %>               
        <%     l.cellPhoneGPSData = 1; %>
        <%      DateTime dt = DateTime.Now ;          %>  
        <%     l.Lat = Convert.ToDouble(latitude.Value.ToString());%>
        <%    l.time = dt; %>
        <%     l.Long = Convert.ToDouble(longitude.Value.ToString()); %>
        <%      db.LocationDataPackets.InsertOnSubmit(l); %>
        <% save(db);     %>
    }
</script>
</head>
<body onLoad="initialize()">
<div id="google_map" ></div><button id="drop" onClick="addMyMarker()">Drop Markers</button>
  <input id="latitude" runat="server" value="3.33" />
  <input id="longitude" type="text" runat="server" value="3.33" />
  <input id="latitude1" type="text" value="3.33"/>
  <input id="longitude1" type="text" value="3.33"/>
</body>
</html>


#谷歌地图{宽度：550px；高度：450px；页边顶部：50px；左边距：自动；右边距：自动；}
var mapCenter=new google.maps.LatLng（33.650077,73.034054）//谷歌地图坐标
变量映射
var标记
var marker1
函数initialize（）//函数初始化Google地图
{
谷歌地图选项=
{
中心：地图中心，//地图中心
缩放：15，//缩放级别，0=地球视图到更高的值
panControl:true，//启用平移控制
zoomControl:true，//启用缩放控制
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.SMALL//缩放控件大小
},
scaleControl:true，//启用缩放控制
mapTypeId:google.maps.mapTypeId.ROADMAP//google地图类型
};
map=new google.maps.map（document.getElementById（“google_-map”），googleMapOptions）；
marker=新的google.maps.marker({
位置：地图中心，
地图：地图，
真的，
动画：google.maps.animation.DROP，
标题：“这是一个新的标记！”，
图标：“http://maps.google.com/mapfiles/ms/micons/blue.png"
});
marker1=新的google.maps.Marker({
位置：地图中心，
地图：地图，
真的，
动画：google.maps.animation.DROP，
标题：“这是一个新的标记！”，
图标：“http://maps.google.com/mapfiles/ms/micons/blue.png"
});
google.maps.event.addListener（标记'dragend'，函数（evt）{
document.getElementById（'latitude'）。value=evt.latLng.lat（）；
document.getElementById（'longitude'）。value=evt.latLng.lng（）；
});
google.maps.event.addListener（marker1，'dragend'，function（evt）{
document.getElementById（'latitude1'）。value=evt.latLng.lat（）；
document.getElementById（'longitude1'）。value=evt.latLng.lng（）；
});
}
函数addMyMarker（）{//在单击按钮时添加标记的函数
}
落笔
我没有用javascript编写代码的经验。
非常感谢您的帮助。

JavaScript运行客户端，不能将c#“嵌入”其中，为此，我会将c#代码移动到自己的页面，并使用AJAX向服务器发送/接收数据，并相应地执行c#代码

无法直接从JavaScript执行服务器端代码，您必须调用某种web服务来执行服务器端功能。@BenRobinson您试过了吗？我可以有一个例子的链接吗？你能分享任何例子的链接吗？写文件并从中读取如何？javascript允许这样做吗？我试图创建文件，但它没有创建任何JavaScript，只在客户端上运行，在您的示例中，C#只在服务器上运行。您不能在两者之间与文件交互。不能像这样在两者之间传递变量。您生成的代码将在单击按钮时在客户端运行JavaScript，并在加载页面时在服务器上运行c#代码。必须应用客户端和服务器之间的通信方法。