1、首先用一个html文件调用百度地图接口(主要注册一个序列号):
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>百度地图的Hello World</title>
- <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=6c497f51c06477544e5fa6e9bd68f7c3"></script>
-
-
- </head>
- <body>
- <div id="allmap">
- </div>
- </body>
- </html>
-
-
- <script type="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();
- }
-
-
- private void Form1_Load(object sender, EventArgs e)
- {
- try
- {
-
-
- webBrowser1.Url = new Uri(Path.Combine(Application.StartupPath, "GoogleMap.htm"));
- }
- catch (Exception ex)
- {
- MessageBox.Show(ex.Message, "异常", MessageBoxButtons.OK, MessageBoxIcon.Error);
- }
-
-
- }
-
-
- private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
- {
-
- webBrowser1.Document.InvokeScript("setLocation", new object[] { 121.504, 39.212 });
- }
-
-
- }
- }
首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/details/9617177)。
那么接下来就是一些关联性的操作。首先我建议把web的文件放到vs中来进行修改(文件本身以及用到的资源都要存到bin/debug中)。
这样统一操作更容易实现。
几个关键的问题在这要提一下:
问题一:webbrowser和form之间的数据传输问题。
答:这个已经在http://blog.csdn.net/buptgshengod/article/details/9617093,这里讲过了。
问题二:如果你不会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");就可以使地图执行这个函数。