学习相关

利用百度地图JS API显示运动轨迹

之前用过百度地图Android SDK，觉得功能很强大，而且工具封装的很好，语句写出来也很好懂，照着官方的例子就能很快学会。这会儿需要在WPF程序中实现，只能用百度地图JavaScript API了。要实现的功能是：程序不断获得到GPS坐标信息，并将轨迹显示在地图上，标注出最后一个位置。这其中还涉及到了百度坐标转换API。

首先当然要在xaml中加入一个控件WebBrowser用来显示HTML页面。

<WebBrowser x:Name="map" />
在MainWindow的构造函数中，加入以下内容，使WebBrowser加载我们需要加载的HTML文件。这里文件名为"map.html"。 
Uri mapUri = new Uri(@"map.html");
map.Navigate(mapUri);
程序获取到一个新的GPS坐标点，利用WebBrowser控件调用JavaScript里的函数move(lat, lng)。 
double lat = 39.918;
double lng = 116.409;
map.InvokeScript("move", new object[] {lat, lng });
map.html里的内容如下(因为懒所以直接把Javascript代码写到HTML里了) 
<!DOCTYPE html>  
<html>  
<!-- saved from url=(0014)about:internet -->
<head>  
<meta http-equiv="X-UA-Compatible" content="IE=9" >
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Hello, World</title>   <!--标题-->
<style type="text/css">  
html{height:100%}  
body{height:100%;margin:0px;padding:0px}  
#container{height:100%}  
</style>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8pEG3G7pYGIya6gaHGcU8pbE">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
</script>
</head>
<body>  
<div id="container"></div> 
<script type="text/javascript"> 
var map = new BMap.Map("container");   // 创建地图实例  
var point = new BMap.Point(116.404, 39.915);   // 创建点坐标  
map.centerAndZoom(point, 15);   // 初始化地图，设置中心点坐标和地图级别       
var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}    // 设置地图类型控件样式为小型
map.addControl(new BMap.NavigationControl(opts));   // 添加地图类型控件
var lastpoint = null;   // 最后一次到达的点(百度坐标)
var marker;   // 当前位置的标注
translateCallback = function (data){   // 百度坐标转换回调函数
    if(data.status === 0) {   // 转换成功
        var newpoint = data.points[0];   // 新到达的点(百度坐标)
        if (lastpoint != null) {
            var polyline = new BMap.Polyline([    
                lastpoint, newpoint   
            ], {strokeColor:"red", strokeWeight: 6, strokeOpacity: 0.5});
            map.addOverlay(polyline);   // 如果最后一次到达的点不为空，则在地图上添加一条线
        }
        map.removeOverlay(marker);   // 删除之前的标注
        marker = new BMap.Marker(newpoint);   // 根据新到达的点创建标注    
        map.addOverlay(marker);   // 将标注添加到地图中
        map.panTo(newpoint);   // 移动地图中心到新到达的点
        lastpoint = newpoint;   // 修改最后一次到达的点
    }
}
function move(lat, lng) {
    var convertor = new BMap.Convertor();   // 新建一个坐标转换器
    var pointArr = [];
    var ggPoint = new BMap.Point(lng, lat);   // 将要转换的坐标(GPS坐标)
    pointArr.push(ggPoint);   // 把坐标添加到转换数组中
    convertor.translate(pointArr, 1, 5, translateCallback);   // 调用百度坐标转换，设置回调函数为translateCallback
}
</script>  
<style type="text/css"> 
.anchorBL{ 
display:none; 
} /*去除百度地图版权信息，不建议这么做*/
</style> 
</body>  
</html>

最终效果如图。

baidumap_js