百度map

<!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

时间: 2024-10-01 03:12:21

百度map的相关文章

【iOS】苹果,百度Map定位使用与总结

OS中使用较多的3款地图,google地图.百度地图.苹果自带地图(高德).其中苹果自带地图在中国使用的是高德的数据.苹果在iOS 6之后放弃了使用谷歌地图,而改用自家的地图.在国内使用的较多的就是百度.苹果自带地图(高德),以下总结下这两个. 一.苹果地图的使用 因为苹果使用的是高德的地图,加上苹果做的一些封装,使用起来也非常方便.不需要引入第三方框架,相比较之下,使用百度地图SDK会使源码与程序都 大10M多,这点很蛋疼.同时由于苹果使用的是高德,不会像谷歌地图一样在国内乌龟一样的访问速度,

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title></title> <script

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

在<HT for Web整合OpenLayers实现GIS地图应用>篇中介绍了HT for Web与OpenLayers的整合,不少朋友反应国内用得比较多的还是百度地图,虽然HT整合百度地图原理与OpenLayers一致,但不同GIS引擎客户端结合代码细节还是有不少差异,自定义地图风格更是完全不一样,为此我再开篇介绍下HT与百度地图整合的方案,这次我们将改进以前的例子,除了代表城市的拓扑节点外,再增加连线连接省会和城市,实现网络拓扑链路的流动效果. 百度地图有多种客户端SDK,我们这里用的自然

python利用百度map webapi获得经纬度

1 # -*- coding: utf-8 -*- 2 import urllib 3 import urllib2 4 import json 5 6 def getloca(loca): 7 url='http://api.map.baidu.com/geocoder/v2/?address='+loca+ 8 '&output=json&ak=GrfpdE3WyT8ZY6oOnb26pCxPEBLxGkuO&callback=showLocation'#从百度api调用 9

百度map android sdk3.5实现定位 并跳转的指定坐标,添加标记

前几天又下载了新的百度地图sdk,3.5版本,发现百度地图api有了较大变化 定位和3.0版本差不多 但是设置地图中心和添加maker标记有较大变化 设置地图中心点 // 定义地图状态zoom表示缩放级别3-18 MapStatus mMapStatus = new MapStatus.Builder().target(cenpt) .zoom(14).build(); // 定义MapStatusUpdate对象,以便描述地图状态将要发生的变化 MapStatusUpdate mMapStat

Android学习笔记之使用百度地图实现Poi搜索

PS:装个系统装了一天.心里憔悴.感觉不会再爱了. 学习内容: 1.使用百度Map实现Poi搜索. 2.短串分享 3.在线建议查询   百度地图的研究也算是过半了.能够实现定位,实现相关信息的搜索,实现地图控制这也就算是掌握了一大部分了.这次主要是说说如何去实现poi搜索.那么什么是Poi.   Poi:poi中文翻译为兴趣点.捞干的说其实就是周边的一些ktv,酒店,餐馆,理发店等等都是一个poi.在实现了基础定位的前提后,去搜索附近的poi.这样就可以完成一些其他事情.比如说订一份外卖,预定一

[android] 百度地图开发 (二).定位城市位置和城市POI搜索

一. 百度地图城市定位和POI搜索知识       上一篇文章"百度地图开发(一)"中讲述了如何申请百度APIKey及解决显示空白网格的问题.该篇文章主要讲述如何定位城市位置.定位自己的位置和进行城市兴趣点POI(Point of Interest)搜索.那么如何在百度地图上定位某一个位置呢?       通过类GeoPoint可以定义经纬度,它存放着纬度值和经度值,通过getLastKnownLocation()方法可以获取Location对象,再定位经纬度设置其为地图中心即可显示当

使用百度地图SDK

百度地图 SDK升级了,所以就试试这个新版的,发现和以前的又很多不一样的地方,但是熟悉以前的版本改动挺大的,想设置个MapView的各种参数都不知道怎么搞,摸索了很久才有点眉目-_-! 尤其是百度的API文档,简直让人抓狂... 实现功能:使用自定义的Fragment作为百度地图,可以自动定位,手动定位,定位标志等等.. 还可以实现更多的功能... 首先下载好百度地图的最新SDK 定位SDKv4.2 ,   地图SDKv3.0.0 按照官方说明,下载好sdk,导入工程 需要先到百度控制台申请ak

百度地图3.1.0(二)基于MapFragment的基本地图

基于Fragment的百度Map也很简单 直接看例子吧: AndroidManifest.xml的配置: 1 <?xml version="1.0" encoding="utf-8"?> 2 <manifest xmlns:android="http://schemas.android.com/apk/res/android" 3 package="com.example.testbaidu_v_3_1" 4