接了一个外包，让我做地图系统。采用C#嵌套JavaScript编程，为Hybird应用，框架内存是基于winform，调用了控件webbrowser,webbrowser解释、渲染html文件，JavaScript脚本。地图采用百度地图API,通过http加密Ak请求，获得真实的基础地图，定位点则根据坐标点定位，动效是使用JavaScript完成。JavaScript链接sql server
github源码:https://github.com/QQ951127336/Hybird_map
form.designer.cs,调一个webbrowser控件
namespace map
{
partial class map
{
/// <summary>
/// Required designer variable.
/// </summary>
private System.ComponentModel.IContainer components = null;
/// <summary>
/// Clean up any resources being used.
/// </summary>
/// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
protected override void Dispose(bool disposing)
{
if (disposing && (components != null))
{
components.Dispose();
}
base.Dispose(disposing);
}
#region Windows Form Designer generated code
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.webBrowser1 = new System.Windows.Forms.WebBrowser();
this.SuspendLayout();
//
// webBrowser1
//
this.webBrowser1.Location = new System.Drawing.Point(0, 0);
this.webBrowser1.MinimumSize = new System.Drawing.Size(20, 20);
this.webBrowser1.Name = "webBrowser1";
this.webBrowser1.Size = new System.Drawing.Size(1474, 1229);
this.webBrowser1.TabIndex = 0;
this.webBrowser1.DocumentCompleted += new System.Windows.Forms.WebBrowserDocumentCompletedEventHandler(this.webBrowser1_DocumentCompleted);
//
// map
//
this.AutoScaleDimensions = new System.Drawing.SizeF(10F, 20F);
this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
this.ClientSize = new System.Drawing.Size(1500, 1400);
this.Controls.Add(this.webBrowser1);
this.Name = "map";
this.Text = "虎丘区银行查询系统";
this.Load += new System.EventHandler(this.虎丘区银行查询系统_Load);
this.ResumeLayout(false);
}
#endregion
private System.Windows.Forms.WebBrowser webBrowser1;
}
}
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文件
<!DOCTYPE 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>
<!--引用百度地图API-->
<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<x_sql.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++;
}
}
