PC端地图Hybird应用开发（百度地图API+C#+JavaScript）
接了一个外包，让我做地图系统。采用C#嵌套JavaScript编程，为Hybird应用，框架内存是基于winform，调用了控件webbrowser,webbrowser解释、渲染html文件，JavaScript脚本。地图采用百度地图API,通过http加密Ak请求，获得真实的基础地图，定位点则根据坐标点定位，动效是使用JavaScript完成。JavaScript链接sql server
github源码:https://github.com/QQ951127336/Hybird_map
1.vs新建一个winform项目
form.designer.cs,调一个webbrowser控件
namespace map
{
partial class map
{
/// 2.webbrowser的navigate方法导入html文件路径，然后就可以开始用js写内容了。
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace map
{
public partial class map : Form
{
public map()
{
InitializeComponent();
string path = System.Environment.CurrentDirectory;
this.webBrowser1.Navigate(path+"\\map.html");
}
private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
}
private void 虎丘区银行查询系统_Load(object sender, EventArgs e)
{
}
}
}
3.建立html框架和申请百度ak
ak申请地址：
http://lbsyun.baidu.com/apiconsole/key
html文件
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
<title>百度地图API自定义地图title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密匙">//密钥即你申请的ak！！！！！！！！！！！！！！！！！！！！script>
head>
<body>
<div style="width:700px;height:550px;border:#ccc solid 1px;font-size:12px" id="map">div>
<p style="color:red;font-weight:600">地图生成工具基于百度地图JS api v2.0版本开发，使用请申请密匙。
<a href="http://developer.baidu.com/map/index.php?title=jspopular/guide/introduction" style="color:#2f83c7" target="_blank">了解如何申请密匙a>
<a href="http://lbsyun.baidu.com/apiconsole/key?application=key" style="color:#2f83c7" target="_blank">申请密匙a>
p>
body>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMapOverlay();//向地图添加覆盖物
}
function createMap(){
map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(116.403874,39.914889),12);
}
function setMapEvent(){
map.enableScrollWheelZoom();
map.enableKeyboard();
map.enableDragging();
map.enableDoubleClickZoom()
}
function addClickHandler(target,window){
target.addEventListener("click",function(){
target.openInfoWindow(window);
});
}
function addMapOverlay(){
}
//向地图添加控件
function addMapControl(){
var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
map.addControl(scaleControl);
var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(navControl);
var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
map.addControl(overviewControl);
}
var map;
initMap();
script>
html>这样大致就做好了一个地图，接着就是百度地图的jsAPI了
页面跳转
window.location.href='map.html';//引号里面填跳转的文件添加了一个sqlserver数据库连接
conn.Open(“Provider=SQLOLEDB.1;Data Source=127.0.0.1,1433;User ID=sa;Password=school1234567890;Initial Catalog=Highschool”);
provider 是驱动，Data source是地址和端口，然后是用户和密码，以及数据库名。
在通过 Execute(“数据库语句”)操纵数据库。
function connDB(){
conn = new ActiveXObject("ADODB.Connection");
conn.Open("Provider=SQLOLEDB.1;Data Source=127.0.0.1,1433;User ID=sa;Password=school1234567890;Initial Catalog=Highschool");
var x_sql = conn.Execute("select x from bank");
var y_sql = conn.Execute("select y from bank");
var name_sql = conn.Execute("select name from bank");
var local_sql = conn.Execute("select local from bank");
var phone_sql = conn.Execute("select phone from bank");
var img_sql = conn.Execute("select image from bank;");
if(time.Fields.Count)
time = x_sql.Fields.Count;
var i = 0;
while(!x_sql.EOF){
banks[bank_amount] = new bank (x_sql.Fields(i).value,y_sql.Fields(i).value,name_sql.Fields(i).value,local_sql.Fields(i).value,phone_sql.Fields(i).value,img_sql.Fields(i).value);
x_sql.moveNext();
y_sql.moveNext();
name_sql.moveNext();
local_sql.moveNext();
phone_sql.moveNext();
img_sql.moveNext();
bank_amount++;
}
}