2. 程式人生 > >基於百度地圖API的WinForm地圖

基於百度地圖API的WinForm地圖

阿新 • • 發佈：2018-12-30


      大概去年的這個時候，我用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>

下面是程式的一些截圖：

相關推薦

基於百度地圖SDK和Elasticsearch GEO查詢的地理圍欄分析系統（3）-前端實現

方便 復制 類型 復制代碼 自動跳轉 rar 窗口 stack delete 轉載自：http://www.cnblogs.com/Auyuer/p/8086975.html MoonLight可視化訂單需求區域分析系統實現功能： 　　在現實生活中，計算機和互聯網迅速發展，

百度地圖熱力圖--批量地址轉換應用（基於百度api）

ldp item keyvalue 使用 創建地圖 ebr efault amp ont 需求：把外賣訂餐地址做個用戶分布熱力圖 思路分析：第一步去百度地圖api開放平臺找例子 http://lbsyun.baidu.com/jsdemo.htm#c1_15 首

Android開發-基於百度地圖API開發仿滴滴出行APP介面的實現

前 言 近年來，由於移動網際網路快速的發展以及基於移動裝置的APP的普及，移動網際網路改變了人們的生活方式。從線上的電子支付到線下的出行，移動網際網路是當今社會人們生活不可或缺的一部分，而線下出行的網約車的出現極大便利了人們的出行，雖然它飽受了很大的爭議，但不可否認的是網約車的出現是

基於百度地圖API刪除指定的覆蓋物

引用百度地圖API過程中，想刪除指定的覆蓋物，有很多很多的坑。什麼clearOverlay()方法，直接給我所有覆蓋物都給乾沒了。還有網上介紹的removeOverlay(物件)，這種又介紹不清楚，然後自己經過實踐，最終解決了。 直接上圖、上程式碼。 查詢所有地圖的覆蓋物程式碼： /

基於百度地圖API的WinForm地圖

      大概去年的這個時候，我用VB寫了一個百度地圖的Demo，使用了webBrowser載入本地網頁的方式，只是限於當時的技術，好多功能都沒實現，昨天，我重新對這個程式進行了編寫，這一次我使用的是C#。在正式開始之前，先來解決幾個問題。       一、地圖    

Android定位&地圖&導航——基於百度地圖移動獲取位置和自動定位

public class MainActivity extends Activity { public MyApplication app; static MapView mMapView = null; public MKMapViewListener mMapListen

Android定位&地圖&導航——基於百度地圖實現的定位功能

public class MyApplication extends Application{ public LocationClient mLocationClient = null; public GeofenceClient mGeofenceClient; publi

Android定位&地圖&導航——基於百度地圖，實現自定義圖示繪製並點選時彈出泡泡

public class MainActivity extends Activity { private EditText txtAddr; // 定位相關 LocationClient mLocClient; LocationData locData = nul

基於百度地圖SDK整合的一些功能

最近開發的專案用到了地圖，並在地圖上顯示某些座標位置的標記圖示，點選圖示來顯示此座標處的一些資訊，之後我從百度地圖卡房平臺下載了百度地圖的SDK和Demo,並結合API總結了一下幾點內容，實現了下面的幾個功能： （1）最基本功能，定位到當前位置 並獲

一個基於百度地圖的桌面軟體（附工程原始碼）

光陰似箭，日月如梭，恍然間，2013就這樣平平淡淡的過去了。想想工資卡上的餘額，心中不免浮起蛋蛋的憂桑。如果再回到2013。。。。。罷了，青春就是如此，每個人都肆無忌憚的揮霍著，在年華正當之時。或許只有當歲月的烙印狠狠落下的那一刻，我們才會想起那再也回不去的美好年華，那落英

iOS基於百度地圖的開發(1)——使用者當前位置

首先需要設定mapView的屬性： self.mapView = [[[BMKMapView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)] aut

2016基於百度地圖定位

現在百度改版後有點不習慣，沒辦法，只有自己又去看了一下，比以前的簡單方便多，有時間我會把導航等給做出來，當然了這個程式碼只是對於初學者來的，因為我自己也是初學者，你自己也可以在百度API上去看，試著寫一遍，我這個主要的目的還是因為最近需要我才弄了一個定位的東西提

基於百度地圖做動態路線打點

// 百度地圖API功能 // 百度地圖獲取容器 var mp = new BMap.Map("allmap"); // 百度地圖定義中心點 mp.centerAndZoom(new BMap.Point(116.3964,39.9093), 15); //

基於百度地圖開發網易班車地圖導航展示

col uri type open one 記錄 length () 代碼 來到網易已經不知不覺一兩個月了，最近把原來租的房子出租後，打算重新租一套房子。找到一個好房子不容易，首先考慮交通問題，上下班時間不能耗費太長，網易提供了遍布全城的班車系統，不過說實話，貌似只有文字說

GPS轉化為百度坐標地圖展示

js地址：http://lbsyun.baidu.com/jsdemo.htm#c1_3 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/h

百度高德地圖如何下載

                     目前在網際網路公開服務中，或者絕大多數手機APP裡看到的，都是基於柵格（瓦片）模型的地圖服務，比如大家看到的百度地圖或者谷歌地圖，其實對於某一塊

百度高德地圖poi資料下載

          對於地圖產品而言，某個地理位置周邊的資訊，稱之為 POI 。百度地圖的官方文件中是這麼解釋的：位置資料，point of information。不過網路上也有其他的說法，point of interest ，地圖上任何

全國百度高德地圖poi資料下載

2018年11月11日 13:33:00 wanjiawen0260 閱讀數：15 標籤： poi

Android 百度定位及地圖SDK

一 、Android 百度定位SDK 1 、開發文件 1.2：配置環境： 1.2.1 ：新增庫檔案 a) 在 相關下載下載最新 庫檔案。 b)使用Eclipse開發的開發者，將SO檔案的壓縮檔案解壓出來，把對應架構下的SO檔案放入開發者自己APP的對應架構下的資料夾中

使用百度SDK，地圖不能顯示 + 不能定位幾步解決方法

前言 在平時地圖模組的開發中，最常見的問題就是地圖顯示不出來或者是不能定位，找了半天都不知道出了什麼問題。經過兩三個專案的開發後，我也學會了如何解決這類問題。現總結出以下幾小點。其實按這幾步走就能找出問題的所在了。 一、API key的問題（地圖不顯示）