<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>我爱你</title>

    <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.2&services=true"></script>

    <style type="text/css">

        .div-relative {

            position: relative;

            color: #000;

            border: 1px solid #000;

            width: 99%;

            height: 800px;

        }

        /* 背景为黄色 */

        .div-a {

            position: absolute;

            left: 80px;

            top: 80px;

            background: #00F;

            width: 300px;

            height: 300px;

        }

        /* DIV背景颜色为蓝色*/

    </style>

</head>

<body>

    <div class="div-relative" id="dituContent" >

    </div>

</body>

</html>

<script>

    function initMap() {

        createMap();//创建地图

        setMapEvent();//设置地图事件

        addMapControl();//向地图添加控件

        //addMarker(markerArr); //向地图中添加marker

        //Load_Point(content);

    }

    //创建地图函数：

    var local;

    function createMap() {

        var map = new BMap.Map("dituContent", { minZoom: 13, maxZoom: 18 }); //在百度地图容器中创建一个地图

        var point = new BMap.Point(111.292827, 30.697726); //定义一个中心点坐标

        map.centerAndZoom(point, 13); //设定地图的中心点和坐标并将地图显示在地图容器中

        window.map = map; //将map变量存储在全局

        local = new BMap.LocalSearch(map, {

            renderOptions: {

                map: map,

                selectFirstResult: false

            }

        });

    }

    //地图事件设置函数：

    function setMapEvent() {

        map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)

        map.enableScrollWheelZoom(); //启用地图滚轮放大缩小

        map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写)

        map.enableKeyboard(); //启用键盘上下左右键移动地图

    }

    //地图控件添加函数：

    function addMapControl() {

        //向地图中添加缩放控件

        var ctrl_nav = new BMap.NavigationControl({

            anchor: BMAP_ANCHOR_TOP_LEFT,

            type: BMAP_NAVIGATION_CONTROL_LARGE

        });

        map.addControl(ctrl_nav);

        //向地图中添加缩略图控件

        var ctrl_ove = new BMap.OverviewMapControl({

            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,

            isOpen: 1

        }); map.addControl(ctrl_ove); //向地图中添加比例尺控件

        var ctrl_sca = new BMap.ScaleControl({

            anchor: BMAP_ANCHOR_BOTTOM_LEFT

        });

        map.addControl(ctrl_sca);

        map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] }));

    }

    //创建marker

    function addMarker(markerArr1) {

        for (var i = 0; i < markerArr1.length; i++) {

            var json = markerArr1[i];

            var p0 = json.monitoring_point_longitude;

            var p1 = json.monitoring_point_latitude;

            var point = new BMap.Point(p0, p1);

            var icon = { h: 60, l: 0, lb: 9, t: 1, w: 60, x: 6 };

            var iconImg = createIcon(icon, 1, markerArr1[i]);

            var marker = new BMap.Marker(point, { icon: iconImg });;

            var iw = createInfoWindow(markerArr1, i);

            var label = new BMap.Label(json.monitoring_point_name, { "offset": new BMap.Size(icon.lb - icon.x + 15, -2) });

            marker.setLabel(label);

            map.addOverlay(marker);

            label.setStyle({ borderColor: "#808080", color: "#333", cursor: "pointer" });

            (function () {

                var index = i;

                var _iw = iw;

                var _marker = marker;

                _marker.addEventListener("click", function () {

                    this.openInfoWindow(_iw);

                });

                _iw.addEventListener("open", function () { _marker.getLabel().hide(); });

                _iw.addEventListener("close", function () { _marker.getLabel().show(); });

                label.addEventListener("click", function () { _marker.openInfoWindow(_iw); });

                if (!!json.isOpen) {

                    label.hide(); _marker.openInfoWindow(_iw);

                }

            })()

        }

    }

    //<option value="0">水文气象综合站</option>

    // <option value="1">河道水文站</option>

    // <option value="2">道路水位站</option>

    var mnType = {

        "0": "水文气象综合站",

        "1": "河道水文站",

        "2": "道路水位站"

    };

    //创建InfoWindow

    function createInfoWindow(markerArr1, i) {

        var json = markerArr1[i];

        var data = loademstimedata(json.monitoring_point_mn);

        var tr = "";

        $(data).each(function (index, row) {

            tr += "<tr><td>" + row.factor_name + "</td><td>" + row.datatime + "</td><td>" + row.avgvalue + "</td></tr>";

        });

        var opts = {

            width: 700,     // 信息窗口宽度

            height: 400,     // 信息窗口高度

            title: "", // 信息窗口标题

            enableMessage: true,//设置允许信息窗发送短息

            message: ''

        }

        var detail = "站点名称：" + json.monitoring_point_name +

             "<br>站点类型：" + mnType[json.monitoring_point_type] +

            "<br/>站点的地址：" + json.monitoring_point_address;

        if (!json.monitoring_point_pic) {

            json.monitoring_point_pic = "../Images/img/none.jpg";

        }

        var imgDom = "<img style='float:left;margin-left: 27px;width:156px;height:165px;' src='" + json.monitoring_point_pic + "' /><div style='float:left;font-size: 17px;margin-left: 20px;width:370px;overflow-x: auto;'>" + detail + "</div>";

        var htmldom = imgDom + "<table class='table'>" +

              "<thead><tr>" +

                      "<th >名称</th>" +

                      "<th >时间</th>" +

                      "<th >监测值</th>" +

              "<tr/></thead>" +

              "<tbody>" + tr + "</tbody>"

        "</table>";

        var iw = new BMap.InfoWindow(htmldom, opts);

        return iw;

    }

    //创建一个Icon

    function createIcon(json, t, obj) {

        var icon;

        if (obj.monitoring_point_pic) {

            if (t == 1) {

                icon = new BMap.Icon(obj.monitoring_point_pic, new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 20), offset: new BMap.Size(json.x, json.h) });

            }

        } else {

            if (t == 1) {

                icon = new BMap.Icon("../Scripts/easyui/themes/ext/arrow_down.png", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 20), offset: new BMap.Size(json.x, json.h) });

            }

        }

        return icon;

    }

    var points = null;

    initMap();

</script>

参考 http://developer.baidu.com/map/jsdemo.htm#a1_2

百度map的更多相关文章

  1. 百度地图瓦片原理 | 百度map使用教程

    百度地图瓦片原理: http://blog.csdn.net/mygisforum/article/details/22997879 百度map使用教程: http://www.myexception ...

  2. H5结合百度map实现GPS定位

    前言 目前我们做m端时都会用到定位,当用户第一次打开h5页面时会启动gps定位,并结合百度map来查找城市.按照我们的逻辑思路就是gps定位获取经纬度,传到后台调用百度的一个接口查找城市名称. 1.查 ...

  3. 一个百度MAP导航的基础封装

    项目中需要根据点击时候点击的内容,输入百度地图查找并展示规划等相关功能 于是封装了一个单独的百度map的html页面以供调用 功能包括了 ①展示底图 ②切换卫星图,切换卫星路线图,切换普通地图 ③通过 ...

  4. 手机版的百度map封装,使用gps定位

    代码如下,包自己引 包参考 一个百度MAP导航的基础封装 使用的是浏览器调用gps定位 修改了标注的大小 效果如图: 代码...... <!DOCTYPE html> <html&g ...

  5. 百度Map与HT for Web结合的GIS网络拓扑应用

    在<HT for Web整合OpenLayers实现GIS地图应用>篇中介绍了HT for Web与OpenLayers的整合,不少朋友反应国内用得比较多的还是百度地图,虽然HT整合百度地 ...

  6. （转）百度Map API

    转自  http://blog.sina.com.cn/s/blog_6079f38301013sb3.html 一.与地图操作相关的接口哦! (这些接口的开启都是写在执行成功的回调函数那里) map ...

  7. 【iOS】苹果，百度Map定位使用与总结

    iOS中使用较多的3款地图,google地图.百度地图.苹果自带地图(高德).当中苹果自带地图在中国使用的是高德的数据.苹果在iOS 6之后放弃了使用谷歌地图,而改用自家的地图.在国内使用的较多的就是 ...

  8. mono for android 百度map binding项目(转)

    好丫小子之前发布过百度地图android SDK的mono for android绑定dll,许多朋友看过之后说想理解是怎么绑定的,现我把绑定的代码发出来. 针对2.1.2版本百度地图android ...

  9. wechat JS-SKD (getLoaction) 定位显示百度map

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

随机推荐

  1. Mysql5.6.x版本半同步主从复制的开启方法

    介绍 先了解一下mysql的主从复制是什么回事,我们都知道,mysql主从复制是基于binlog的复制方式,而mysql默认的主从复制方式,其实是异步复制. 主库实际上并不关心从库是否把数据拉完没有, ...

  2. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-如何设置PLC的扫描周期，运行周期

    双击PlcTask,然后再Cycle ticks中可以修改PLC的扫描周期,例如修改为2ms   为了验证是否真的是2ms,可以在程序中跟计数器绑定使用,PLC2ms扫描一次,计数器也是每个周期增加0 ...

  3. 倍福TwinCAT(贝福Beckhoff)应用教程12.3 TwinCAT控制松下伺服 NC进阶

    在前面一节,我们简单介绍了通过PLC+HMI实现完整控制松下伺服的上使能-运动,采集位置,速度等功能,这里我们会大量简化用到的贝福功能块(为了更加实用).首先依然是对单个轴的封装,我们之前的做法,例如 ...

  4. pytz 格式化北京时间 6分钟问题

    使用datetime直接构造时间的时候,设置时区是没有北京时间的,一般来说习惯了linux的同志都会默认用上海时间来代替,这里却有一个问题,如果要进行时区转换,上海时间比北京时间差6分钟... 比如: ...

  5. 我的superui开源后台bootstrap开发框架

    我的superui开源后台bootstrap开发框架:http://git.oschina.net/tzhsweet/superui

  6. CSS Flexible 布局兼容性以及解决方案

    1.兼容性 https://caniuse.com/#feat=flexbox IE11以及以下不支持. 2.解决方案 flexibility库 https://github.com/jonathan ...

  7. Java 内部类种类及使用解析【转】

    内部类Inner Class 将相关的类组织在一起,从而降低了命名空间的混乱. 一个内部类可以定义在另一个类里,可以定义在函数里,甚至可以作为一个表达式的一部分. Java中的内部类共分为四种: 静态 ...

  8. \r与\n有何差别，编码的时候应该怎样使用

    差别: \r: 全称:carriage return (carriage是"字车"的意思.打印机上的一个部件) 简称:return 缩写:r ASCII码:13 作用:把光标移动到 ...

  9. C++设计模式之代理模式

        IPhone 6已经在中国香港开售了,圆了在专卖店等候一个多月苹果粉丝的苹果梦.然而对中国大陆而言.须要到9月17日苹果才在大陆开售.这对中国大陆的粉丝而言,不亚于一种煎熬,因此而滋生一种代购 ...

  10. Silverlight Telerik RadGridView动态增删行及行列操作（转载）

    最近使用一直使用第三方控件Telerik,版本 2011 Q1,一直使用显示控件RadGridView,使用起来比DataGird好使, 也发现有控件问题. radgridview.BeginInse ...