Visual Basic .NET Language
विंडोज फॉर्म में गूगल मैप्स
खोज…
विंडोज फॉर्म में Google मैप का उपयोग कैसे करें
इस उदाहरण का पहला भाग बताता है कि इसे कैसे लागू किया जाए। दूसरे में, मैं बताऊंगा कि यह कैसे काम करता है। यह एक सामान्य उदाहरण बनने की कोशिश करता है। मानचित्र के लिए टेम्पलेट (चरण 3 देखें) और उदाहरण फ़ंक्शन पूरी तरह से अनुकूलन योग्य हैं।
############################################################ #################
चरण 1. सबसे पहले, एक नया प्रोजेक्ट बनाएं और विंडोज फॉर्म एप्लिकेशन चुनें। आइए इसका नाम "फॉर्म 1" छोड़ दें।
चरण 2। अपने Form1 में एक WebBrowser नियंत्रण (जो आपके नक्शे को पकड़ेगा) जोड़ें। चलो इसे "wbmap" कहते हैं
चरण 3. अपने पसंदीदा टेक्स्ट एडिटर के साथ "googlemap_template.html" नामक एक .html फ़ाइल बनाएं और निम्नलिखित कोड पेस्ट करें:
googlemap_template.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#gmap {
height: 100%;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
//Use window.X instead of var X to make a variable globally available
window.markers = new Array();
window.marker_data = [[MARKER_DATA]];
window.gmap = new google.maps.Map(document.getElementById('gmap'), {
zoom: 15,
center: new google.maps.LatLng(marker_data[0][0], marker_data[0][1]),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var newmarker, i;
for (i = 0; i < marker_data.length; i++) {
if (marker_data[0].length == 2) {
newmarker = new google.maps.Marker({
position: new google.maps.LatLng(marker_data[i][0], marker_data[i][1]),
map: gmap
});
} else if (marker_data[0].length == 3) {
newmarker = new google.maps.Marker({
position: new google.maps.LatLng(marker_data[i][0], marker_data[i][1]),
map: gmap,
title: (marker_data[i][2])
});
} else {
newmarker = new google.maps.Marker({
position: new google.maps.LatLng(marker_data[i][0], marker_data[i][1]),
map: gmap,
title: (marker_data[i][2]),
icon: (marker_data[i][3])
});
}
google.maps.event.addListener(newmarker, 'click', (function (newmarker, i) {
return function () {
if (newmarker.title) {
infowindow.setContent(newmarker.title);
infowindow.open(gmap, newmarker);
}
gmap.setCenter(newmarker.getPosition());
// Calling functions written in the WF
window.external.showVbHelloWorld();
window.external.getMarkerDataFromJavascript(newmarker.title,i);
}
})(newmarker, i));
markers[i] = newmarker;
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript">
// Function triggered from the WF with no arguments
function showJavascriptHelloWorld() {
alert("Hello world in HTML from WF");
}
</script>
<script type="text/javascript">
// Function triggered from the WF with a String argument
function focusMarkerFromIdx(idx) {
google.maps.event.trigger(markers[idx], 'click');
}
</script>
</head>
<body>
<div id="gmap"></div>
</body>
</html>
यह हमारे मानचित्र टेम्पलेट के रूप में काम करेगा। मैं समझाऊंगा कि यह बाद में कैसे काम करता है।
चरण 4. अपनी परियोजना में googlemap_template.hmtl फ़ाइल जोड़ें (अपनी परियोजना पर राइट क्लिक करें-> जोड़ें-> मौजूदा आइटम)
चरण 5. आपके समाधान एक्सप्लोरर में दिखाई देने के बाद, इसके गुणों को निम्न पर सेट करें:
- एक्शन बनाएँ -> एंबेडेड संसाधन
- कस्टम टूल नेमस्पेस -> प्रोजेक्ट का नाम लिखें
चरण 6. एक नया वर्ग जोड़ें (अपनी परियोजना पर राइट क्लिक करें-> जोड़ें-> वर्ग)। अपने उदाहरण में मैं इसे GoogleMapHelper कहूंगा।
चरण 7. अपनी कक्षा में निम्नलिखित कोड चिपकाएँ:
GoogleMapHelper.vb
Imports System.IO
Imports System.Reflection
Imports System.Text
Public Class GoogleMapHelper
' 1- googlemap_template.html must be copied in the main project folder
' 2- add the file into the Visual Studio Solution Explorer (add existing file)
' 3- set the properties of the file to:
' Build Action -> Embedded Resource
' Custom Tool Namespace -> write the name of the project
Private Const ICON_FOLDER As String = "marker_icons/" 'images must be stored in a folder inside Debug/Release folder
Private Const MAP_TEMPLATE As String = "WindowsApplication1.googlemap_template.html"
Private Const TEXT_TO_REPLACE_MARKER_DATA As String = "[[MARKER_DATA]]"
Private Const TMP_NAME As String = "tmp_map.html"
Private mWebBrowser As WebBrowser
'MARKER POSITIONS
Private mPositions As Double(,) 'lat, lon
' marker data allows different formats to include lat,long and optionally title and icon:
' op1: mMarkerData = New String(N-1, 1) {{lat1, lon1}, {lat2, lon2}, {latN, lonN}}
' op2: mMarkerData = New String(N-1, 2) {{lat1, lon1,'title1'}, {lat2, lon2,'title2'}, {latN, lonN, 'titleN'}}
' op3: mMarkerData = New String(N-1, 3) {{lat1, lon1,'title1','image1.png'}, {lat2, lon2,'title2','image2.png'}, {latN, lonN, 'titleN','imageN.png'}}
Private mMarkerData As String(,) = Nothing
Public Sub New(ByRef wb As WebBrowser, pos As Double(,))
mWebBrowser = wb
mPositions = pos
mMarkerData = getMarkerDataFromPositions(pos)
End Sub
Public Sub New(ByRef wb As WebBrowser, md As String(,))
mWebBrowser = wb
mMarkerData = md
End Sub
Public Sub loadMap()
mWebBrowser.Navigate(getMapTemplate())
End Sub
Private Function getMapTemplate() As String
If mMarkerData Is Nothing Or mMarkerData.GetLength(1) > 4 Then
MessageBox.Show("Marker data has not the proper size. It must have 2, 3 o 4 columns")
Return Nothing
End If
Dim htmlTemplate As New StringBuilder()
Dim tmpFolder As String = Environment.GetEnvironmentVariable("TEMP")
Dim dataSize As Integer = mMarkerData.GetLength(1) 'number of columns
Dim mMarkerDataAsText As String = String.Empty
Dim myresourcePath As String = My.Resources.ResourceManager.BaseName
Dim myresourcefullPath As String = Path.GetFullPath(My.Resources.ResourceManager.BaseName)
Dim localPath = myresourcefullPath.Replace(myresourcePath, "").Replace("\", "/") & ICON_FOLDER
htmlTemplate.AppendLine(getStringFromResources(MAP_TEMPLATE))
mMarkerDataAsText = "["
For i As Integer = 0 To mMarkerData.GetLength(0) - 1
If i <> 0 Then
mMarkerDataAsText += ","
End If
If dataSize = 2 Then 'lat,lon
mMarkerDataAsText += "[" & mMarkerData(i, 0) & "," + mMarkerData(i, 1) & "]"
ElseIf dataSize = 3 Then 'lat,lon and title
mMarkerDataAsText += "[" & mMarkerData(i, 0) & "," + mMarkerData(i, 1) & ",'" & mMarkerData(i, 2) & "']"
ElseIf dataSize = 4 Then 'lat,lon,title and image
mMarkerDataAsText += "[" & mMarkerData(i, 0) & "," + mMarkerData(i, 1) & ",'" & mMarkerData(i, 2) & "','" & localPath & mMarkerData(i, 3) & "']" 'Ojo a las comillas simples en las columnas 3 y 4
End If
Next
mMarkerDataAsText += "]"
htmlTemplate.Replace(TEXT_TO_REPLACE_MARKER_DATA, mMarkerDataAsText)
Dim tmpHtmlMapFile As String = (tmpFolder & Convert.ToString("\")) + TMP_NAME
Dim existsMapFile As Boolean = False
Try
existsMapFile = createTxtFile(tmpHtmlMapFile, htmlTemplate)
Catch ex As Exception
MessageBox.Show("Error writing temporal file", "Writing Error", MessageBoxButtons.OK, MessageBoxIcon.[Error])
End Try
If existsMapFile Then
Return tmpHtmlMapFile
Else
Return Nothing
End If
End Function
Private Function getMarkerDataFromPositions(pos As Double(,)) As String(,)
Dim md As String(,) = New String(pos.GetLength(0) - 1, 1) {}
For i As Integer = 0 To pos.GetLength(0) - 1
md(i, 0) = pos(i, 0).ToString("g", New System.Globalization.CultureInfo("en-US"))
md(i, 1) = pos(i, 1).ToString("g", New System.Globalization.CultureInfo("en-US"))
Next
Return md
End Function
Private Function getStringFromResources(resourceName As String) As String
Dim assem As Assembly = Me.[GetType]().Assembly
Using stream As Stream = assem.GetManifestResourceStream(resourceName)
Try
Using reader As New StreamReader(stream)
Return reader.ReadToEnd()
End Using
Catch e As Exception
Throw New Exception((Convert.ToString("Error de acceso al Recurso '") & resourceName) + "'" & vbCr & vbLf + e.ToString())
End Try
End Using
End Function
Private Function createTxtFile(mFile As String, content As StringBuilder) As Boolean
Dim mPath As String = Path.GetDirectoryName(mFile)
If Not Directory.Exists(mPath) Then
Directory.CreateDirectory(mPath)
End If
If File.Exists(mFile) Then
File.Delete(mFile)
End If
Dim sw As StreamWriter = File.CreateText(mFile)
sw.Write(content.ToString())
sw.Close()
Return True
End Function
End Class
नोट: MAP_TEMPLATE स्थिरांक में आपके प्रोजेक्ट का नाम शामिल होना चाहिए
चरण 8. अब हम अपने GoogleMapHelper वर्ग का उपयोग करके अपने वेबपेजो में मानचित्र को लोड करने और उसके लोड करने (और विधि) को कॉल करके और उदाहरण देकर कह सकते हैं। आप अपने मार्कर का निर्माण कैसे करें आप पर निर्भर है। इस उदाहरण में, स्पष्टीकरण के लिए, मैं उन्हें हाथ से लिखता हूं। मार्कर डेटा को परिभाषित करने के लिए 3 विकल्प हैं (GoogleMapHelper वर्ग टिप्पणियां देखें)। ध्यान दें कि यदि आप तीसरे विकल्प (शीर्षक और आइकन सहित) का उपयोग करते हैं, तो आपको अपने डिबग / रिलीज़ फ़ोल्डर में "मार्कर_संस" (या जो भी आप GoogleMapHelper निरंतर ICON_FOLDER में परिभाषित करते हैं) नामक एक फ़ोल्डर बनाना होगा और वहां अपनी .png फाइलें रखें। मेरे मामले में:
मैंने अपने फॉर्म 1 में दो बटन बनाए कि कैसे मानचित्र और डब्ल्यूएफ इंटरैक्ट करते हैं। यहाँ है कि यह कैसा दिखता है:
और यहाँ कोड है:
Form1.vb
Imports System.IO
Imports System.Reflection
Imports System.Security.Permissions
Imports System.Text
<PermissionSet(SecurityAction.Demand, Name:="FullTrust")>
<System.Runtime.InteropServices.ComVisible(True)>
Public Class Form1
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Me.wbmap.ObjectForScripting = Me
Dim onlyPositions As Double(,) = New Double(2, 1) {{42.13557, -0.40806}, {42.13684, -0.40884}, {42.13716, -0.40729}}
Dim positonAndTitles As String(,) = New String(2, 2) {{"42.13557", "-0.40806", "marker0"}, {"42.13684", "-0.40884", "marker1"}, {"42.13716", "-0.40729", "marker2"}}
Dim positonTitlesAndIcons As String(,) = New String(2, 3) {{"42.13557", "-0.40806", "marker0", "truck_red.png"}, {"42.13684", "-0.40884", "marker1", "truck_red.png"}, {"42.13716", "-0.40729", "marker2", "truck_red.png"}}
'Dim gmh As GoogleMapHelper = New GoogleMapHelper(wbmap, onlyPositions)
'Dim gmh As GoogleMapHelper = New GoogleMapHelper(wbmap, positonAndTitles)
Dim gmh As GoogleMapHelper = New GoogleMapHelper(wbmap, positonTitlesAndIcons)
gmh.loadMap()
End Sub
'############################### CALLING JAVASCRIPT METHODS ##############################
'This methods call methods written in googlemap_template.html
Private Sub callMapJavascript(sender As Object, e As EventArgs) Handles Button1.Click
wbmap.Document.InvokeScript("showJavascriptHelloWorld")
End Sub
Private Sub callMapJavascriptWithArguments(sender As Object, e As EventArgs) Handles Button2.Click
wbmap.Document.InvokeScript("focusMarkerFromIdx", New String() {2})
End Sub
'#########################################################################################
'############################### METHODS CALLED FROM JAVASCRIPT ##########################
'This methods are called by the javascript defined in googlemap_template.html when some events are triggered
Public Sub getMarkerDataFromJavascript(title As String, idx As String)
MsgBox("Title: " & title & " idx: " & idx)
End Sub
Public Sub showVbHelloWorld()
MsgBox("Hello world in WF from HTML")
End Sub
End Class
महत्वपूर्ण: अपनी कक्षा फॉर्म 1 की परिभाषा से पहले इन पंक्तियों को जोड़ना न भूलें:
<PermissionSet(SecurityAction.Demand, Name:="FullTrust")>
<System.Runtime.InteropServices.ComVisible(True)>
वे क्या करते हैं। .NET फ्रेमवर्क को बताना है कि हम फुलट्रस्ट चाहते हैं और क्लास को COM के लिए दृश्यमान बनाते हैं इसलिए Form1 जावास्क्रिप्ट को दिखाई देता है।
अपने Form1 लोड फ़ंक्शन में भी इसे न भूलें:
Me.wbmap.ObjectForScripting = Me
यह googlemap_template.hmtl पेज पर जावास्क्रिप्ट के लिए आपके फॉर्म 1 वर्ग को उजागर करता है।
अब आप निष्पादित कर सकते हैं और यह काम करना चाहिए
################################# यह काम किस प्रकार करता है############## ###################
असल में, हमारा GoogleMapHelper वर्ग हमारे googlemap_template.html को पढ़ने के लिए, एक अस्थायी प्रतिलिपि बनाने के लिए, मार्करों ([[MARKER_DATA]]) से संबंधित कोड को प्रतिस्थापित करता है और पृष्ठ को हमारे प्रपत्र के वेब ब्राउज़र नियंत्रण में निष्पादित करता है। यह html सभी मार्करों से गुजरता है और प्रत्येक को एक 'क्लिक' श्रोता देता है। यह क्लिक फ़ंक्शन स्पष्ट रूप से पूरी तरह से अनुकूलन योग्य है। उदाहरण में यह एक infowindow खोलता है यदि मार्कर का शीर्षक है, तो ऐसे मार्कर में मानचित्र को केंद्र में रखता है और दो बाहरी कार्यों को कॉल करता है जो हमारे फॉर्म 1 वर्ग में परिभाषित हैं।
दूसरी ओर, हम इस HTML में अन्य जावास्क्रिप्ट फ़ंक्शंस (या बिना तर्क के) को अपने विंडोज फॉर्म (wbmap.Document.InvokeScript का उपयोग करके) से परिभाषित करने के लिए परिभाषित कर सकते हैं।