PC端地图Hybird应用开发（百度地图API+C#+JavaScript）

最新推荐文章于 2024-05-01 09:17:39 发布

森林海的棕熊

最新推荐文章于 2024-05-01 09:17:39 发布

阅读量2.2k

点赞数

分类专栏： C# javascript 文章标签： javascript api html 百度地图 sql server

本文链接：https://blog.csdn.net/qq951127336/article/details/78031224

版权

javascript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

接了一个外包，让我做地图系统。采用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
    {
        /// <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++;
        } 



    }

森林海的棕熊

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
PC端地图Hybird应用开发（百度地图API+C#+JavaScript）

接了一个外包，让我做地图系统。采用C#嵌套JavaScript编程，为Hybird应用，框架内存是基于winform，调用了控件webbrowser,webbrowser解释、渲染html文件，JavaScript脚本。地图采用百度地图API,通过http加密Ak请求，获得真实的基础地图，定位点则根据坐标点定位，动效是使用JavaScript完成。github源码:https://github.c
复制链接

扫一扫

专栏目录