C#呼叫百度地圖介面簡單示例
阿新 • • 發佈：2019-01-09
1、首先用一個html檔案呼叫百度地圖介面（主要註冊一個序列號）：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
-
<title>百度地圖的Hello World</title>
- <styletype="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>
-
<scripttype="text/javascript"src="http://api.map.baidu.com/api?v=1.5&ak=6c497f51c06477544e5fa6e9bd68f7c3"></script>
- </head>
- <body>
- <divid="allmap">
- </div>
- </body>
- </html>
- <scripttype="text/javascript">
- //alert("Hello World");
- var map = new BMap.Map("allmap"); // 建立Map例項
- var point = new BMap.Point(121.504, 31.212); // 建立點座標(經度,緯度)
- map.centerAndZoom(point, 11); // 初始化地圖,設定中心點座標和地圖大小級別
- map.addOverlay(new BMap.Marker(point)); // 給該座標加一個紅點標記
- //var traffic = new BMap.TrafficLayer(); // 建立交通流量圖層例項
- //map.addTileLayer(traffic); // 將圖層新增到地圖上
- map.addControl(new BMap.NavigationControl()); // 新增平移縮放控制元件
- map.addControl(new BMap.ScaleControl()); // 新增比例尺控制元件
- map.addControl(new BMap.OverviewMapControl()); //新增縮略地圖控制元件
- map.addControl(new BMap.MapTypeControl()); //新增地圖型別控制元件
- map.setCurrentCity("上海"); //設定地圖顯示的城市
- map.enableScrollWheelZoom(); //啟用滾輪放大縮小
- function setLocation(x,y){//引數：經緯度
- var point = new BMap.Point(x, y);
- map.centerAndZoom(point, 11);
- map.addOverlay(new BMap.Marker(point));
- }
- </script>
2、建立一個Winform專案，用一個WebBrower控制元件檢視html檔案、呼叫JavaScript程式碼
- using System;
- using System.IO;
- using System.Collections.Generic;
- using System.ComponentModel;
- using System.Data;
- using System.Drawing;
- using System.Text;
- using System.Windows.Forms;
- namespace BaiDuMap
- {
- public partial class Form1 : Form
- {
- public Form1()
- {
- InitializeComponent();
- }
- privatevoid Form1_Load(object sender, EventArgs e)
- {
- try
- {
- //webBrowser1.Url = new Uri("http://www.2345.com");
- //這個檔案於可執行檔案放在同一目錄
- webBrowser1.Url = new Uri(Path.Combine(Application.StartupPath, "GoogleMap.htm"));
- }
- catch (Exception ex)
- {
- MessageBox.Show(ex.Message, "異常", MessageBoxButtons.OK, MessageBoxIcon.Error);
- }
- }
- privatevoid webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
- {
- //這裡傳入x、y的值，呼叫JavaScript指令碼
- webBrowser1.Document.InvokeScript("setLocation", newobject[] { 121.504, 39.212 });
- }
- }
- }
那麼接下來就是一些關聯性的操作。首先我建議把web的檔案放到vs中來進行修改（檔案本身以及用到的資源都要存到bin/debug中）。
這樣統一操作更容易實現。
幾個關鍵的問題在這要提一下：
問題一：webbrowser和form之間的資料傳輸問題。
問題二：如果你不會html怎麼辦？
答：http://developer.baidu.com/map/jsdemo.htm。這個是百度地圖api的demo網址，在裡面選擇你想要的功能。如果有基本的程式設計功底的，把這個加進自己的程式碼還是很容易做到的。這裡要注意以下，使用demo中的程式碼要用百度提供的key，
<script type="text/javascript" src="http://api.map.baidu.com/api？v=1.5&ak=這裡插入自己的key"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
問題三：如果form要對地圖進行操作怎麼辦？
答：將要對地圖進行的操作，寫成function函式，比如
function getdistance()
{return result1;}
這是一個返回值的函式，然後在form中webBrowser1.Document.InvokeScript("getdistance");就可以使地圖執行這個函式。