<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

        <title>地图</title>

        <style type="text/css">

            body, html{width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}

            #allmap{height:100%;width:100%;}

            #r-result{width:100%;}

        </style>

        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=txa9G9LvtXynqOciUIL56eBs"></script>

        <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>

        <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />

        <script src="jquery.js"></script>

    </head>

    <body>

        <div id="allmap"></div>

    </body>

</html>

<script type="text/javascript">

    var mapInfos = [

        {"id": 0, "title": "", "contents": "通讯地址：<br/>联系电话：<br/>办公时间：周一至周五，9:00—17:00“}
　　　　　　...

    ];

    var map = new BMap.Map("allmap");    // 创建Map实例

    function map_init() {

        map.centerAndZoom(new BMap.Point(120.382267, 36.065791), 11);  // 初始化地图,设置中心点坐标和地图级别

        map.setCurrentCity("青岛");          // 设置地图显示的城市 此项是必须设置的

        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

        //增加所有分局标注

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

            var point = new BMap.Point(mapInfos[i].x, mapInfos[i].y);

            addMarker(point,i);

        }

    }

    function addMarker(point,i) {

        // 创建图标对象

        var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {

            offset: new BMap.Size(10, 25), // 指定定位位置

            imageOffset: new BMap.Size(0, 0 - 11 * 25)   // 设置图片偏移

        });

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

        //对标注绑定点击事件

        marker.addEventListener('click',function(){

            var content = '<div style="margin:0;">' + mapInfos[i].contents + '</div>';

            var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {

                title: mapInfos[i].title,      //标题

                width: 280,             //宽度

                height: 105,              //高度

                panel: "panel",         //检索结果面板

                enableAutoPan: true,     //自动平移

                searchTypes: [

                    BMAPLIB_TAB_SEARCH,   //周边检索

                    BMAPLIB_TAB_TO_HERE,  //到这里去

                    BMAPLIB_TAB_FROM_HERE //从这里出发

                ]

            });

            searchInfoWindow.open(marker); //在marker上打开检索信息串口

        });

        map.addOverlay(marker);

    }

    $(function () {

        map_init();

    });

</script>

Baidu Map Web API 案例的更多相关文章

  1. 对一个前端AngularJS,后端OData,ASP.NET Web API案例的理解

    依然chsakell,他写了一篇前端AngularJS,后端OData,ASP.NET Web API的Demo,关于OData在ASP.NET Web API中的正删改查没有什么特别之处,但在前端调 ...

  2. ASP.NET Core Web API下事件驱动型架构的实现（一）：一个简单的实现

    很长一段时间以来,我都在思考如何在ASP.NET Core的框架下,实现一套完整的事件驱动型架构.这个问题看上去有点大,其实主要目标是为了实现一个基于ASP.NET Core的微服务,它能够非常简单地 ...

  3. Web Api 创建及其使用

    由于创建博客,我需要尝试一些新的技术,新的思路,所以我没规规矩矩的写博客,用上了诸多以前没用的东西,比如现在这个(我只是听过web api 我连 web server 都只是用过两三次/手动滑稽) 昨 ...

  4. 百度地图实现车辆轨迹移动播放(baidu map api)

    开发技术:jquery,js baidu map api,json,ajax QQ1310651206

  5. 使用BaiDu Java Script Web Api 在Web开发中嵌入地图使用步骤

    前言 很多做企业网站的朋友,都喜欢有一个关于我们.联系我们的栏目,那么这个栏目放什么内容才能饱满那,只有放个地图才显得有点高大上. 一.产生并复制访问Api的密钥(AK) 1.首先我们需要注册一个百度 ...

  6. 初识web API接口及Restful接口规范

    一.web API接口 什么是web API接口?: 明确了请求方式,提供对应后台所需参数,请求url链接可以得到后台的响应数据 url : 返回数据的url https://api.map.baid ...

  7. Web API接口规范与测试方法

    目录 1.Web API接口 1.1接口的四大特点 1.2接口文档的编写:YApi 1.3接口测试工具:Postman 2.接口规范(restful) 2.1URL设计 2.1.1 数据的安全保障(h ...

  8. 使用ASP.NET WEB API构建基于REST风格的服务实战系列教程(一)——使用EF6构建数据库及模型

    系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 使用Entity Framework Code First模式构建数据库对象 已经决定使用EF C ...

  9. OAuth2 for asp.net web api

    在上篇文章中我研究了OpenId及DotNetOpenAuth的相关应用,这一篇继续研究OAuth2. https://github.com/DotNetOpenAuth http://www.cnb ...

随机推荐

  1. Matlab:回归分析(2)

    方法一:直接用多元二项式回归 %数据输入 x1 = [ ]; x2 = [ ]; %多元二项式回归函数 y = [ ]; X = [x1' x2']; Y = y'; rstool(X, Y, 'pu ...

  2. shell中$0,$?,$!等的特殊用法【转载】

    本文转载自:http://blog.sina.com.cn/s/blog_464f6dba0100psy9.html ----------------------------------------- ...

  3. 【树形动态规划】【CTSC1997】选课 解题报告

    CTSC1997-选课 描述 学校实行学分制.每门的必修课都有固定的学分,同时还必须获得相应的选修课程学分.学校开设了N(N<300)门的选修课程,每个学生可选课程的数量M是给定的.学生选修了这 ...

  4. selenium webdriver python 元素定位

    总结   定位查找时,返回查找到的第一个match的元素.如果找不到,则 raise NoSuchElementException   单个元素定位: find_element_by_idfind_e ...

  5. ObjectContext

    ObjectContext 类 提供用于查询和使用对象形式的实体数据的功能.它封装了与数据库的底层连接,使你能执行对象查询. ObjectContext封装 .NET Framework 和数据库之间 ...

  6. svn解决冲突 Aborting commit: 'XXXXXXXX'remains in conflict错误

    如果你遇到冲突,三件事你可以选择: “手动”合并冲突文本(检查和修改文件中的冲突标志). 用某一个临时文件覆盖你的工作文件. 运行svn revert <filename>来放弃所有的修改 ...

  7. 加入gitignore文件没有起作用怎么办

    步骤一: 假设有未提交的文件先提交到Git. 步骤二: 在Git根文件夹下运行以下的Git命令: git rm -r --cached . git add . git commit -m " ...

  8. Bitmap基本概念及在Android4.4系统上使用BitmapFactory的注意事项

    本文首先总结一下Bitmap的相关概念,然后通过一个实际的问题来分析设置BitmapFactory.options的注意事项,以减少不必要的内存占用率,避免发生OOM. 一. Bitmap的使用tri ...

  9. HDU -1284钱币兑换

    这个是完全背包的基础题, 模拟换钱, 刚开始状态方程写错了,我直接写dp[i] = dp[i - 1] + dp[i - 2] + dp[i - 3], 然后想了想感觉太大了,不太对,后来看网上的代码 ...

  10. 【转】app瘦身

    iPhone经过这几年的发展,已经发生了很大的变化,例如屏幕变得更加多样,尺寸更多,内存变得更大,CPU的架构也在变化.伴随着iPhone的变化,iOS也在变化,例如AutoLayout.size c ...