基于百度地图API的WinForm地图

大概去年的这个时候，我用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").innerTextvar 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>

下面是程序的一些截图：

基于百度地图API的WinForm地图相关推荐

HTML调用百度地图API，实现地图标注位置
HTML调用百度地图API,实现地图标注位置一.说明二.代码总结提示:以下是本篇文章正文内容,下面案例可供参考一.说明通过HTML调用百度地图API,在指定位置显示出地图,并且在目标位置标 ...
python 实现对地图的点击_利用python和百度地图API实现数据地图标注的方法
如题,先上效果图: 主要分为两大步骤使用python语句,通过百度地图API,对已知的地名抓取经纬度使用百度地图API官网的html例程,修改数据部分,实现呈现效果一.使用python语句,通过 ...
基于百度图像识别api的游戏（coc）辅助工具分析
基于百度图像识别api的游戏(coc)辅助工具分析 (本代码仅供参考学习使用) 去年国庆放假,没事干,刚学了python 于是就找了这个小项目来练练手总体来说难度不大内容也不多几百行搞定 (删 ...
使用vue+腾讯地图API GL实现地图选房的功能
使用vue+腾讯地图API GL实现地图选房的功能背景介绍公司最近想做一个地图选房的功能,在网上找了很久也没有找到这方面的demo,就只好硬着头皮自己写一个地图选房的功能腾讯地图的官方文档.首先 ...
基于百度音乐Api的Android高仿音乐播放App可在线试听下载歌词浏览
基于百度音乐Api的Android高仿音乐播放App可在线试听下载歌词浏览首先这也是学习过程中开发的一个练手项目,基于百度音乐Api,api在网上搜的,如果想看他的实现,可以下载我的项目来参考.风格 ...
调用腾讯地图API、高德地图API 获取当前地理位置、经纬度
调用腾讯地图API.高德地图API 获取当前地理位置.经纬度 web开发中,很多情况下都会需要获取当前位置的经纬度,在网上找了几个不同的地图,最终找到兼容比较好的腾讯地图API 1.调用腾讯地图API ...
基于百度翻译API的node插件
基于百度翻译API的node插件背景做过国际化的项目就明白要把每处的文案翻译成不同的语言版本,如果只是一点点,自己去百度上翻译成对应语言版本,copy过来就ok了,但是如果这个项目文案特别多的话, ...
android百度地图例子,使用百度地图API进行Android地图应用开发（Eclipse）(示例代码)...
随着基于位置的服务的兴起,地图类App呈现爆发趋势.随着而来的是地图供应商开放大量的API.供开发人员开发基于PC或者移动端的应用程序. 如今我们研究使用百度地图SDK进行Android项目的开发. ...
如何在网中使用百度地图API自定义个性化地图
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
python调用百度地图实现导航pc_利用python和百度地图API实现数据地图标注
如题,先上效果图: 主要分为两大步骤使用python语句,通过百度地图API,对已知的地名抓取经纬度使用百度地图API官网的html例程,修改数据部分,实现呈现效果一.使用python语句,通过百 ...

基于百度地图API的WinForm地图

基于百度地图API的WinForm地图相关推荐

最新文章

热门文章