(C#.Net) 구글맵, 자바스크립트 데이터 연결, MySQL 데이터 열람수정

MySQL DB 데이터를 Grid로 불러오기, Grid 데이터가 수정·삭제되면 DB 데이터도 수정·삭제됨

GoogleMaps API 지도 표시하기

.NET에서 Javascript 함수 호출하기

Javascript에서 .NET 메소드 호출하기

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; using MySql.Data.MySqlClient; using System.Net.Json; using System.Security.Permissions; using System.Runtime.InteropServices; namespace GoogleMaps { [PermissionSet(SecurityAction.Demand, Name ="FullTrust")] [ComVisible(true)] public partial class Form1 : Form { public Form1() { InitializeComponent(); } private MySqlDataAdapter mySqlDataAdapter; private string server; private string database; private string uid; private string password; private void btn_Connect_Click(object sender, EventArgs e) { DataSet DS = new DataSet(); server = "0.0.0.0"; database = "db"; uid = "id"; password = "pw"; string connectionString; connectionString = "SERVER=" + server + ";" + "DATABASE=" + database + ";" + "UID=" + uid + ";" + "PASSWORD=" + password + ";"; string strConn = connectionString; using (MySqlConnection mySqlConnection = new MySqlConnection(strConn)) { mySqlConnection.Open(); label1.Text = mySqlConnection.State.ToString(); string sql = "SELECT * FROM `location_log` ORDER BY `no` DESC LIMIT 20"; mySqlDataAdapter = new MySqlDataAdapter(sql, mySqlConnection); mySqlDataAdapter.Fill(DS); dataGridView1.DataSource = DS.Tables[0]; } } private void dataGridView1_RowValidated(object sender, DataGridViewCellEventArgs e) { DataTable changes = ((DataTable)dataGridView1.DataSource).GetChanges(); if (changes != null) { MySqlCommandBuilder mcb = new MySqlCommandBuilder(mySqlDataAdapter); mySqlDataAdapter.UpdateCommand = mcb.GetUpdateCommand(); mySqlDataAdapter.Update(changes); ((DataTable)dataGridView1.DataSource).AcceptChanges(); } } private void dataGridView1_CellClick(object sender, DataGridViewCellEventArgs e) { string strLocation; int key =0; try { // 위치 컬럼 데이터 가져오기 strLocation = dataGridView1.Rows[e.RowIndex].Cells[3].Value.ToString(); label_selectedRowIndex.Text = strLocation; JsonTextParser parser = new JsonTextParser(); JsonObject obj = parser.Parse(strLocation); foreach (JsonObject field in obj as JsonObjectCollection) { string name = field.Name; string value = field.GetValue().ToString(); if (name == "locnet") { label_Data1.Text = value; webBrowser1.Document.InvokeScript("CallScript", new object[] { value }); key++; } } } catch { } } private void Form1_Load(object sender, EventArgs e) { webBrowser1.ObjectForScripting = true; } public void CallForm(object msg) { string sMsg = (string)msg; { // 받은 msg 값을 가지고 처리하는 로직. MessageBox.Show("test?","Wow",MessageBoxButtons.YesNo,MessageBoxIcon.Question,MessageBoxDefaultButton.Button1); } } } }

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>My Map</title>
</head>
<body>
    <style>
        * {
            margin: 0;
        }

body, html {
            height: 100%;
            width: 100%;
        }

.map-canvas {
            width: 100%;
            height: 100%;
        }
    </style>
    <div id="map-canvas" class="map-canvas">
    </div>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script type="text/javascript">
        function submitToForm() {
            var textboxvalue = "abs123";
            window.external.CallForm(textboxvalue);
        }

//CADM GEO-INFO
        var CDAM_Latlng = new google.maps.LatLng(37, 128); // (Lat, Lng)
        var CDAM_mapOptions = {
            zoom: 16,
            center: CDAM_Latlng
        }

var map = new google.maps.Map(document.getElementById('map-canvas'), CDAM_mapOptions);

function initialize() {

google.maps.event.trigger(map, 'resize');

}

google.maps.event.addDomListener(window, 'load', initialize);

function CallScript(CDAM_Latlng)  
        {  
            var CDAM_marker = new google.maps.Marker({
                animation: google.maps.Animation.DROP,
                position: CDAM_Latlng,
                map: map
            });
        }  
    </script>
</body>
</html>

아래 그림은 휴대폰에서 송신한 위치 데이터를 보는 프로그램입니다.

저작자표시 비영리 변경금지

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

(C#.Net) 구글맵, 자바스크립트 데이터 연결, MySQL 데이터 열람수정

관련글

티스토리툴바