2012-12-07 69 views
1

我有一個winform客戶端,其中包含一個webbrowser控件。在Visual Studio中使用C#,並運行MSSQL進行持久化。 我的目標是:在winform中顯示帶參數的HTML瀏覽器控件(谷歌地圖)

以存儲在我的MSSQL數據(通過DBML/DataContext的處理),並顯示出谷歌地圖(使用Javascript v3)而我在數據庫中得到了每個地址上的一個標記。

現在,我有我的應用程序解決方案的HTML文件,與顯示谷歌地圖這樣的JS代碼(可以稱之爲mymap.html):

var map; 
var _geoLocationsArr = [ 
    ["Tranehavevej 10, 2450", "Fiberby"], 
    ["Tranehavevej 8, 2450", "Fiberby"], 
    ["Tranehavevej 6, 2450", "Fiberby"], 
    ["Tranehavevej 4, 2450", "Fiberby"], 
    ["Johan Kellers Vej 27, 2450", "Service"], 
    ["Johan Kellers Vej 25, 2450", "Service"], 
    ["Johan Kellers Vej 23, 2450", "Service"], 
    ["Johan Kellers Vej 21, 2450", "Service"], 
    ["Johan Kellers Vej 24, 2450", "Potentiel"] 
     ]; 
     var customIcons = { 
      Fiberby: { 
       icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', 
       shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png', 
       title: 'Fiberby' 
      }, 
      Service: { 
       icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png', 
       shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png', 
       title: 'Service' 
      }, 
      Unknown: { 
       icon: 'http://labs.google.com/ridefinder/images/mm_20_gray.png', 
       shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png', 
       title: 'Ukendt' 
      } 
     }; 
     var geocoder; 

     function initialize(lat, lng) { 
      geocoder = new google.maps.Geocoder(); 
      var myLatlng = new google.maps.LatLng(lat, lng); 
      var mapOptions = { 
       zoom: 14, 
       center: myLatlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
      //geocodeMe(); 
     } 

     function toggle() { 
      initialize(55.66718, 12.5411); 
      for (var i = 0; i < _locations.length; i++) { 
       var item = _locations[i]; 
       var latlng = new google.maps.LatLng(item[0], item[1]); 
       var icon = customIcons[_locations[i][1]] || {}; 
       var marker = new google.maps.Marker({ 
        position: latlng, 
        map: map, 
        icon: icon.icon, 
        shadow: icon.shadow, 
        title: "Hello World! " + i 
       }); 
      } 
     } 

     function toggleGeocodes() { 
      initialize(55.66718, 12.5411); 
      for (var i = 0; i < _geoLocationsArr.length; i++) { 
       geocodeMe(_geoLocationsArr[i][0], _geoLocationsArr[i][1]); 
      } 
     } 

     function geocodeMe(address, type) { 
      geocoder.geocode({ 
       'address': address 
       }, 
       function(result, status){ 
        if(status == google.maps.GeocoderStatus.OK){ 
         map.setCenter(result[0].geometry.location); 
         var icon = customIcons[type] || customIcons['Unknown']; 
         var marker = new google.maps.Marker({ 
          map: map, 
          icon: icon.icon, 
          shadow: icon.shadow, 
          position: result[0].geometry.location, 
          title: icon.title 
          }); 
         } else{ 
         alert('Geocode was not successful for the following reason: ' + status); 
        } 
      }); 
     } 
    </script> 
</head> 
<body onload="initialize(55.665919, 12.55482)"> 
    <div id="map_canvas" style="width: 100%; height: 100%"></div> 
</body> 

當我打的「地理切換「按鈕,它會在地圖上爲_geoLocationsArr中的每個地理編碼地址顯示標記。一切工作都很完美。

但是!現在,我想用我的winform生成的數據替換_geoLocationsArr,我的winform創建標記數據(xml或字符串數​​組,它對我來說無關緊要,重要的是它可以從winform到HTML頁面中的JS)。

那麼,如何在我的WinForm中創建數據,並在點擊調用JS html頁面的按鈕時,使用表單創建的數據作爲參數? 因此,在調用函數toogleGeocodes()時,它會將數據作爲參數,如函數toggleGeocodes(_myGeoLocationsArr []),其中_myGeoLocationsArr []是Winform創建並在調用該函數時作爲參數發送的內容。

回答

1

這需要WebBrowser控件和Javascript html頁面之間的複雜通信,這可能不值得花時間,因爲有商業可用產品在那裏做。

一個簡單的解決方案將是GDS Google Map WinForms Control。您可以在三個簡單的步驟做: 假設GDS谷歌地圖對象被命名爲_gdsGoogleMap

  1. 內MapInitialized事件處理程序,添加一個圖標層:

_iconLayer = _gdsGoogleMap.IconLayerManager.LayerCollection。添加(「YourLayerName」);

  • 在Form.cs某處,調用 _gdsGoogleMap.BeginGeocoding( 「您的地址」);

  • 內MapGeocodingCompleted事件處理程序添加返回的緯度LNG作爲: _iconLayer.IconCollection.Add(新圖標(e.LatLng.Lat,e.LatLng.Lng, 「你的圖標說明」, 「你的圖標路徑」) );

  • 您可以動態地添加所需圖標。不要忘記將地圖重新​​定位到您的返回距離接近的位置,以便您可以看到新添加的圖標。

    乾杯。

    相關問題