从Access数据库中取出定位点，通过百度地图API在地图上显示

最新推荐文章于 2020-06-12 22:04:27 发布

ccnccyj

最新推荐文章于 2020-06-12 22:04:27 发布

阅读量3.3k

点赞数

分类专栏：百度地图API 文章标签： access 数据库 api 百度 microsoft function

本文链接：https://blog.csdn.net/ccnccyj/article/details/7963106

版权

百度地图API 专栏收录该内容

1 篇文章

订阅专栏

1、新建一数据库Access，命名为Map.mdb

2、新建一张表t_Point，表结构如下图：

3、增加数据点

4、编写程序代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div style="width:1120px;height:800px;border:1px solid gray" id="container"></div>
    </form>
</body>
</html>
<script type="text/javascript" language="javascript">

    //初始化MAP
    var map = new BMap.Map("container");
    map.centerAndZoom(new BMap.Point(107.1095, 29.156102), 16);
    map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
    map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
    map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
    var myIcon = new BMap.Icon("http://dev.baidu.com/wiki/static/map/API/examples/images/ico-1-9.png",
        new BMap.Size(28, 40), {    //小车图片
        offset: new BMap.Size(0, -5),    //相当于CSS精灵
        imageOffset: new BMap.Size(0, -5)    //图片的偏移量。为了是图片底部中心对准坐标点。

    });
    //数据库操作
    var conn = new ActiveXObject("ADODB.Connection");
    conn.Open("DBQ=D://WebSys//BaiduMap//Map.mdb;DRIVER={Microsoft Access Driver (*.mdb)};");
    var rs = new ActiveXObject("ADODB.Recordset");
    var sql = "select * from t_Point";
    rs.open(sql, conn);
    var i = 0;
    while (!rs.EOF) {
        addMarker(rs.Fields("fX").Value,
                  rs.Fields("fY").Value,
                  rs.Fields("sName").Value,
                  null,
                  false);
        rs.moveNext();
        i=i+1
    }
    rs.close();
    rs = null;
    conn.close();
    conn = null;

   function addMarker(lng, lat, siteName, siteImage, isDH) {
       var newPoint = new BMap.Point(lng, lat); //创建点坐标
       var marker = new BMap.Marker(newPoint, { icon: myIcon }); //创建标注
       marker.addEventListener("click", function (e) {
           alert("当前位置：" + siteName + "\n经度：" + e.point.lng + "\n纬度：" + e.point.lat);
       }); //监听点击标注事件
       marker.enableDragging(); //托拽标注

       marker.addEventListener("dragend", function (e) {
           alert("当前位置：" + e.point.lng + "," + e.point.lat);
       }); //监听托拽标注事件

       var label = new BMap.Label(siteName, { "offset": new BMap.Size(10, -20) }); //标注说明
       marker.setLabel(label);

       label.setStyle({
           borderColor: "black",
           color: "#2565AC",
           cursor: "pointer"
       });

       map.addOverlay(marker); //将标注添加到地图中

       if (isDH == true) {
           marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
       }
   }

</script>

5、运行效果图：