winform嵌入谷歌地图，实现webBrowser和js的双向通信（一）

在winform中嵌入谷歌地图，并实现定位和根据给出的两个点连接路径的功能。

这是楼主研究生的第一个小项目，历经两天终于实现，期间遇到很多问题，在搜索资料的时候发现有很多朋友也碰到类似的问题，所以在这里给大家分享下经验。

先看下结果图：

接下来先看下html代码：

以下代码都可参考goole map 的api：https://developers.google.com/maps/documentation/javascript/reference。多看看api绝对有好处！

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polylines</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>


function initialize() {
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(36.06667,120.33333),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };


  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
      
  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(36.06667,120.33333),
      map: map
   });
}


function addLine(){  
 var myLat = window.external.getLat_1();
 var myLng = window.external.getLng_1();    
 var myPoint_1 = new google.maps.LatLng(myLat,myLng);
 
 var myLat = window.external.getLat_2();
 var myLng = window.external.getLng_2();    
 var myPoint_2 = new google.maps.LatLng(myLat,myLng);
 
   var mapOptions = {
    zoom: 15,
    center: myPoint_1,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };


  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
  
  var flightPlanCoordinates = [
    myPoint_1,
    myPoint_2
  ];
  
    var marker = new google.maps.Marker({
      position: myPoint_1,
      map: map
  });
  
      var marker = new google.maps.Marker({
      position: myPoint_2,
      map: map
  });
  
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });


  flightPath.setMap(map);
}


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


    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

主要分两部分，addLine()之上是一部分，之下是一部分，下面我们分别解析。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>

function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(36.06667,120.33333),
mapTypeId: google.maps.MapTypeId.TERRAIN
};

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

var marker = new google.maps.Marker({
position: new google.maps.LatLng(36.06667,120.33333),
map: map
});
}

这一段如函数名即初始化地图，并在给定位置添加标注。

mapOptions中，zoom表示放大倍数（可更改），center表示初始地图中心位置，maptypeid 现在不用管这个参数。

接下来就是实例化map，传入mapOptions中的参数。 marker即在给定位置添加标注。

直接复制此段代码和最后一句

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

放到html文件里，用浏览器打开就可以加载地图了。

下面addLine 方法中核心就是

<pre name="code" class="html"> var myLat = window.external.getLat_1();
 var myLng = window.external.getLng_1();    
 var myPoint_1 = new google.maps.LatLng(myLat,myLng);
 
 var myLat = window.external.getLat_2();
 var myLng = window.external.getLng_2();    
 var myPoint_2 = new google.maps.LatLng(myLat,myLng);

通过wendow.external方法从前台winform中获得输入的坐标。具体可看下篇，详细讲述wenform和js的双向互动。

其余代码看变量名就很容易懂了，或者去看下API，我就不再赘述了。

winform嵌入谷歌地图，实现webBrowser和js的双向通信（一）

猜你喜欢