C#-winform地图定位的实现-百度地图API

时间 2019-12-07 标签 c# winform 地图定位实现百度地图 api

需求：从硬件设备获取GPS等信息，实时在地图上显示定位信息，同时能够查询一段时间内的位置轨迹。

TIP1：从硬件获取的原始GPS数据，最好通过转换成百度GPS坐标或者Google坐标以后再在地图上标出来，不然会存在较大误差。

TIP2：百度API调用要有得到访问应用的AK，同时能够参考百度提供的丰富的API示例。

地址：http://developer.baidu.com/map/index.html

http://developer.baidu.com/map/jsdemo.htm#a6_2

实现过程：winform中使用webBrowser控件，webBrowser控件用来装载并显示你要的地图。地图经过网页(.htm)文件来作，参考百度API示例，使用javascript代码来实现，标点和连线，标注文本框等功能。数据获取自文件(XML)或者数据库中的经纬度数据(能够经过百度拾点工具去作测试数据)。大概画了个框图。

htm实现(定点例)：javascript代码中，建立XML解析器，添加地图，设置显示文本窗口；解析XML文件，得到时间、位置等有效信息；标点、添加图层。代码示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
		#allmap{height:423px;width:100%;}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=HudrPv3onektDMvvIwPEo***"></script>
    <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
	<title>经纬度定位</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>

上面ak的值，你们申请好以后要填写本身的。我注释了后三位。下面是javascript的function函数

function myTimer()
	{
	    ///step1:链接数据库，获取最后一行的温度、位置、时间信息
		///step2：是否须要进行GSP坐标转换为百度坐标
		///step3：显示定位点，以及标注信息（GPS坐标、温度、时间）
		//step1:读取XML数据信息
		xmlDoc.async = false;
		xmlDoc.resolveExternals = false;
		xmlDoc.load("FE68CD.xml");                                   //装载XML文件
		var arrNodes = xmlDoc.getElementsByTagName('message');          //获取当前一组温度、经纬度、设备号、时间信息
		Num = arrNodes.length;
		SheBeiHao = arrNodes[Num - 1].childNodes[0].childNodes[0].nodeValue;
		WenDu = arrNodes[Num - 1].childNodes[1].childNodes[0].nodeValue;
		JinDu = arrNodes[Num - 1].childNodes[2].childNodes[0].nodeValue;
		WeiDu = arrNodes[Num - 1].childNodes[3].childNodes[0].nodeValue;
		ShiJian = arrNodes[Num - 1].childNodes[4].childNodes[0].nodeValue;
		//2014/12/24 星期三修改，GPS转百度点在后台已经作过，不须要转换直接显示便可
		///step2：是否须要进行GSP坐标转换为百度坐标
		///step3：显示定位点，以及标注信息（GPS坐标、温度、时间）
		//清除全部地图覆盖物
		map.clearOverlays();
		var BaiDuPoint = new BMap.Point(JinDu, WeiDu);
        map.centerAndZoom(BaiDuPoint, 17);                               //设置中心点和显示等级
		infoWindow.setContent("设备号:" + SheBeiHao + ";温度:" + WenDu  + ";经度:" + BaiDuPoint.lng + ";纬度:" + BaiDuPoint.lat + ";时间：" + ShiJian);
		var marker = new BMap.Marker(BaiDuPoint);
		map.addOverlay(marker);
		map.openInfoWindow(infoWindow, BaiDuPoint);                     //打开信息窗口
		map.setCenter(BaiDuPoint);                                      //以当前的坐标点为中心显示
	}

百度API提供了很详细的实例，复杂功能也有，你们能够去上面的地址参考一下。

XML文件(定位例)实现：

<?xml version="1.0" encoding="utf-8"?>
<root>
  <message Num="1">
    <DeviceId>FE68CD</DeviceId>
    <Temp>24.7℃</Temp>
    <Location_Lng>120.27748457854</Location_Lng>
    <Location_Lat>31.489598073044</Location_Lat>
    <Time>2015-10-26 16:26:05</Time>
  </message>
</root>

最终的效果实测图：

定位图：

轨迹实测图：

总结：轨迹的显示差强人意，多是GPS数据上传的周期较长的缘由，另外实测过程当中会出现大量GPS点彻底一致的状况，不知道是否是原始GPS数据通过转换成百度地图数据以后的缘由，图中的点的间隔也不是很均匀。