基于百度地图API的WinForm地图

来源：互联网发布：情趣女王魏道道淘宝编辑：程序博客网时间：2024/05/19 13:05

大概去年的这个时候，我用VB写了一个百度地图的Demo，使用了webBrowser加载本地网页的方式，只是限于当时的技术，好多功能都没实现，昨天，我重新对这个程序进行了编写，这一次我使用的是C#。在正式开始之前，先来解决几个问题。

一、地图

答：地图调用了百度地图API(http://developer.baidu.com/map/)，由于百度地图API是基于javascript的，所以它更适合于web环境。当我们使用它来做WinForm程序的时候，我们需要用到webBrowser控件，然后加载一个包含了百度地图API的本地网页文件。其实处于安全的角度，这个网页更适合放在服务器上，这样不会暴露其中的js代码。

二、交互

答：C#和JavaScript属于两种不同的程序，两者怎么交互呢？这里我们选择了一个十分重要的方法：InvokeScript(）。

1、无返回值的js代码与C#交互

首先，在网页中写入这样一段js代码：

        function CloseDrawing()        {             drawingManager.close();        }

那么在C#中的调用方式就是：

        private void CloseDrawing()        {            webBrowser.Document.InvokeScript("CloseDrawing");        }

2、有返回值的js代码与C#交互

当js代码有返回值时，我们不能直接获取其返回值，我们需要借助一个隐藏的div或者是label来实现传值

js代码及html结构

       <div id="lng" style="display:none"></div>       <div id="lat" style="display:none"></div>

       map.addEventListener("click", function(e)       {           document.getElementById("lng").innerText = e.point.lng;        document.getElementById("lat").innerText = e.point.lat;       });

C#中的调用方式

       string lng = webBrowser.Document.GetElementById("lng").InnerText;string lat = webBrowser.Document.GetElementById("lat").InnerText;

解决了上述两个问题，那么这个程序的思路就很清晰了，在js里写一个方法，然后通过C#调用这个方法。

首先是网页代码，关于百度地图API的问题，请自行了解和学习。

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}#r-result{height:100%;width:20%;float:left;}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=CE44c78c410e2c801253586c748d43f6"></script><script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script><script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script><link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" /><title></title></head><body><div id="geo" style="display:none"></div><div id="lng" style="display:none"></div><div id="lat" style="display:none"></div><div id="allmap" ></div></body></html><script type="text/javascript">var map = new BMap.Map("allmap");                        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);     map.addControl(new BMap.NavigationControl());               map.addControl(new BMap.ScaleControl());                   map.addControl(new BMap.OverviewMapControl());             map.enableScrollWheelZoom();                           map.addControl(new BMap.MapTypeControl());          map.setCurrentCity("北京");map.addEventListener("click", function(e){      document.getElementById("lng").innerText = e.point.lng;    document.getElementById("lat").innerText = e.point.lat;});var myDis = new BMapLib.DistanceTool(map);//测距组件var styleOptions = {    strokeColor: "red",    //边线颜色。    fillColor: "red",      //填充颜色。当参数为空时，圆形将没有填充效果。    strokeWeight: 3,       //边线的宽度，以像素为单位。    strokeOpacity: 0.8,   //边线透明度，取值范围0 - 1。    fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。    strokeStyle: 'solid' //边线的样式，solid或dashed。}//实例化鼠标绘制工具var drawingManager = new BMapLib.DrawingManager(map, {    isOpen: false, //是否开启绘制模式    enableDrawingTool: true, //是否显示工具栏    drawingToolOptions: {        anchor: BMAP_ANCHOR_BOTTOM_RIGHT, //位置        offset: new BMap.Size(5, 5), //偏离值        scale: 0.8 //工具栏缩放比例    },    circleOptions: styleOptions, //圆的样式    polylineOptions: styleOptions, //线的样式    polygonOptions: styleOptions, //多边形的样式    rectangleOptions: styleOptions //矩形的样式});</script><script>function localsearch(city){    var local = new BMap.LocalSearch(map, {        renderOptions: { map: map, panel: "r-result" }  //构造本地搜索对象    });    local.search(city);}function Hotel(){    var local = new BMap.LocalSearch(map, {        renderOptions: { map: map, panel: "r-result" }  //构造本地搜索对象    });    local.searchInBounds("酒店", map.getBounds());}function Food() {    var local = new BMap.LocalSearch(map, {        renderOptions: { map: map, panel: "r-result" }  //构造本地搜索对象    });    local.searchInBounds("餐饮", map.getBounds());}function Lady() {    var local = new BMap.LocalSearch(map, {        renderOptions: { map: map, panel: "r-result" }  //构造本地搜索对象    });    local.searchInBounds("美容", map.getBounds());}function Movie() {    var local = new BMap.LocalSearch(map, {        renderOptions: { map: map, panel: "r-result" }  //构造本地搜索对象    });    local.searchInBounds("电影", map.getBounds());}function Gas() {    var local = new BMap.LocalSearch(map, {        renderOptions: { map: map, panel: "r-result" }  //构造本地搜索对象    });    local.searchInBounds("加油站", map.getBounds());}function View() {    var local = new BMap.LocalSearch(map, {        renderOptions: { map: map, panel: "r-result" }  //构造本地搜索对象    });    local.searchInBounds("景点", map.getBounds());}function Buy() {    var local = new BMap.LocalSearch(map, {        renderOptions: { map: map, panel: "r-result" }  //构造本地搜索对象    });    local.searchInBounds("购物中心", map.getBounds());}function Store() {    var local = new BMap.LocalSearch(map, {        renderOptions: { map: map, panel: "r-result" }  //构造本地搜索对象    });    local.searchInBounds("超市", map.getBounds());}function KTV() {    var local = new BMap.LocalSearch(map, {        renderOptions: { map: map, panel: "r-result" }  //构造本地搜索对象    });    local.searchInBounds("ktv", map.getBounds());}function Bank() {    var local = new BMap.LocalSearch(map, {        renderOptions: { map: map, panel: "r-result" }  //构造本地搜索对象    });    local.searchInBounds("银行", map.getBounds());}function Transport(start, end){    var transit = new BMap.TransitRoute(map, {        renderOptions: { map: map }    });    transit.search(start, end);}function Driving(start, end){    var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } });    driving.search(start, end);}function Walking(start, end){    var walking = new BMap.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true } });    walking.search(start, end);}function GetLocation() {    var geolocation = new BMap.Geolocation();    geolocation.getCurrentPosition(function (r) {        if (this.getStatus() == BMAP_STATUS_SUCCESS) {            var mk = new BMap.Marker(r.point);            map.addOverlay(mk);            map.panTo(r.point);            alert('您的位置：' + r.point.lng + ',' + r.point.lat);        }        else {            alert('failed' + this.getStatus());        }    }, { enableHighAccuracy: true })}function GetByPoint(lng,lat){    var gc = new BMap.Geocoder();    pt = new BMap.Point(lng,lat);    gc.getLocation(pt, function (rs) {        var addComp = rs.addressComponents;        document.getElementById("geo").innerText=addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;    });}function GetByGeo(geo){    IP();    var cityName=document.getElementById("geo").innerText    var myGeo = new BMap.Geocoder();    // 将地址解析结果显示在地图上,并调整地图视野    myGeo.getPoint(geo, function (point) {        if (point) {            map.centerAndZoom(point, 16);            map.addOverlay(new BMap.Marker(point));            document.getElementById("lng").innerText = point.lng;            document.getElementById("lat").innerText = point.lat;        }    }, cityName);}function GetLocation(){    var geolocation = new BMap.Geolocation();    if (navigator.geolocation){        geolocation.getCurrentPosition(function (r) {            if (this.getStatus() == BMAP_STATUS_SUCCESS) {                var mk = new BMap.Marker(r.point);                map.addOverlay(mk);                map.panTo(r.point);                document.getElementById("geo").innerText ="定位结果为:"+ r.point.lng + ',' + r.point.lat;            }        });         }else{            document.getElementById("geo").innerText="十分抱歉，您的浏览器不支持定位";        }}function IP(){    function myFun(result)     {        var cityName = result.name;        document.getElementById("geo").innerText = cityName;        map.setCenter(cityName);      }    var myCity = new BMap.LocalCity();    myCity.get(myFun);}function DistanceOpen(){    myDis.open();}function DistanceClose(){    myDis.close();}function ZoomIn(){    map.zoomIn();}function ZoomOut() {    map.zoomOut();}function AddPoint(lng,lat){    var marker = new BMap.Marker(new BMap.Point(lng, lat));  // 创建标注    map.addOverlay(marker);}function Addpolyline(){   //添加折线}function AddCirle(lng, lat, r) {    //添加圆    var circle = new BMap.Circle(new BMap.Point(lng,lat), r);    map.addOverlay(circle);}function OpenDrawing(){    drawingManager.open();}function CloseDrawing(){    drawingManager.close();}function SetCity(CityName){    map.setCenter(CityName);}function GetCenter(){    document.getElementById("geo").innerText = map.getCenter().lng + "," + map.getCenter().lat;}function SetBoundary(city){    var bdary = new BMap.Boundary();    bdary.get(city, function (rs) {       //获取行政区域        map.clearOverlays();        //清除地图覆盖物               var count = rs.boundaries.length; //行政区域的点有多少个        for (var i = 0; i < count; i++) {            var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多边形覆盖物            map.addOverlay(ply);  //添加覆盖物            map.setViewport(ply.getPath());    //调整视野                 }    });}</script>

下面是程序的一些截图：