<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. Java笔记6之三目运算符

    /*    单目运算符:~3    双目运算符:3 + 4    三目运算符:        格式:比较表达式?表达式1:表达式2;                比较表达式:结果是一个boolean ...

  2. 八、频繁模式挖掘Frequent Pattern Mining

    频繁模式挖掘(Frequent Pattern Mining): 频繁项集挖掘是通常是大规模数据分析的第一步,多年以来它都是数据挖掘领域的活跃研究主题.建议用户参考维基百科的association r ...

  3. swift 深入理解Swift的闭包

    我们可用swift的闭包来定义变量的值. 先来一个简单的例子大家先感受感受. 定义一个字符串的变量的方法: 直接赋值 var str="JobDeer" 还可以用闭包的方式定义: ...

  4. android不自动弹出虚拟键盘

    如果是Activity的话 在 Manifest.xml 相应的 Activity 里添加 android:windowSoftInputMode="adjustPan|stateHidde ...

  5. 从sockaddr中取得Ip地址和端口号

    在socket编程中,服务器端accept()等待一个客户端的连接,当连接成功后,accept拷贝客户端的地址信息到sin_addr里面,我们如何从sin_addr取得此客户端的Ip地址和端口号呢? ...

  6. Mysql大小写敏感的问题 --转

    一.1 CREATE TABLE NAME(name VARCHAR(10)); 对这个表,缺省情况下,下面两个查询的结果是一样的: SELECT * FROM TABLE NAME WHERE na ...

  7. 12、第十二节课，css伪类 （转）

    一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5. ...

  8. 在Github上面搭建Hexo博客（一）：部署到Github

    什么是Hexo Hexo是一个基于Node.js的静态博客程序,可以方便的生成静态网页托管在Github和Heroku上.并且有很多人为其制作了很多优秀的主题(theme),你可以根据自己的喜好进行设 ...

  9. div中实现居中

    今天纠结了大半天的居中,把学到的先记录下来,还没完全弄清楚,发现网上原创的技术贴并不算多,大多都是相互转载.(ps.先安利一个大神的帖集,昨天才发现的,内容丰富,语言,呃...很幽默,一般都是图文并茂 ...

  10. hdu 5105

    题意: y=|a*x^3+b*x^2+c*x+d|    求y的最大值? 题目是bc上的,之前写的时候,没考虑0的情况(太笨了).... 水题吧.... AC代码: #include <iost ...