<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. Perl时间处理函数

    官方网址:http://search.cpan.org/~stbey/Date-Calc-6.3/lib/Date/Calc.pod#___top use Date::Calc qw( Days_in ...

  2. Scala 编程（三）基本类型和操作

    一些基本类型 值类型 范围 Byte 8位有符号补码整数(-27-27-1) Short 16位有符号补码整数(-215-215-1) Int 32位有符号补码整数(-231-231-1) Long ...

  3. [Design Pattern] Service Locator Pattern 简单案例

    Service Locator Pattern,即服务定位模式,用于定位不同的服务.考虑到 InitialContext::lookup 的成本比较高,提供了 Cache 类缓存以定位到的服务. 代码 ...

  4. Hackerrank 2020 February 2014 解题报告

    Hackerrank 2020 February 2014 解题报告 比赛链接 Sherlock and Watson (20分) 题意:给定一个数组,向右平移K次,然后有Q个询问,问第x位置上是几 ...

  5. java在windows下加载dll

    java在类中加载动态链接库文件. 类文件中: static { System.loadLibrary("dll文件"); } dll文件在工程的包路径下.例如:pro/bin/h ...

  6. python_Opencv_处理鼠标事件

    流程: 首先,创建一个鼠标事件回调函数,当鼠标事件发生时就会被执行. 鼠标事件可以是鼠标上的任何动作,比如左键按下,左键松开,左键双击等. 我们可以通过鼠标事件获得与鼠标对应的图片上的坐标. 根据这些 ...

  7. 【AngularJS入门】用ng-repeat指令实现循环输出

    循环输出列表很多项目在web服务端做,前端做好模版后后端写jsp代码,双方需要紧密合作,分清责任.有些项目由后端提供restful方法,前端用ajax调用自己循环,这种一般是大把的jquery拼字符串 ...

  8. session过期后自动跳转到登陆页

    项目需要做一个自动登出的功能,查询了网上的资料,一开始准备用session监听做,按照下面方式配置监听器 1.在项目的web.xml文件中添加如下代码: <!--添加Session监听器--&g ...

  9. EF 已有打开的与此 Command 相关联的 DataReader，必须首先将它关闭

    在以下代码中,当第二次foreach时会抛出该异常,原因是:由于Entity在读取数据的时候使用的是DbDataReader进行读取,当作为IEnumuerable<T>对象MoveNex ...

  10. HTML基础总结<标题>

      HTML: 标题 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的. <h1> 定义最大的标题.<h6> 定义最小的标题. & ...