<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. CCF NOIP2015复赛获奖分数线及名额分配办法

                                                     CCF NOIP2015复赛获奖分数线及名额分配办法 中国计算机学会CCF NOI竞赛委员会.科学委员 ...

  2. Java学习日记-7 抽象类和接口

    一.抽象类 abstract修饰:类和类中的方法 抽象方法:abstract type name(parameter-list);(abstract不能修饰static方法和构造函数) 引用:抽象类有 ...

  3. SRM 584 DIV1

    A 简单的差分约束模型 , 因为d是定值 , 所以也可以按最短路理解 , trick是不能把圈算进去. #define maxn 55 class Egalitarianism { public: i ...

  4. 在Eclipse中新建Maven项目

    关于Maven的好的资料: Apache官网:http://maven.apache.org/ Apache Maven 入门篇 ( 上 ):http://www.oracle.com/technet ...

  5. paip.gch预编译头不生效的原因以及解决:

    paip.gch预编译头不生效的原因以及解决: 作者Attilax ,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.net/a ...

  6. Java 编程的动态性 第1 部分: 类和类装入--转载

    原文地址:http://www.ibm.com/developerworks/cn/java/j-dyn0429/ 本文是这个新系列文章的第一篇,该系列文章将讨论我称之为 Java 编程的动态性的一系 ...

  7. Ubuntu下php的一些配置问题

    1.php.ini的路径: phpinfo()里 Loaded Configuration File:/etc/php5/fpm/php.ini 要修改这个 在/etc/php5/fpm/cgi里也有 ...

  8. [转] 为什么医疗咨询服务公司Evolent Health仅用4年就华丽上市？

    让医疗主体,即医院和医生担任保险角色,完全控制保费,实现医疗机构的利益最大化.美国公司EvolentHealth帮助所有医院实现这一梦想. 不觉间,已步入2015的下半年.当国内还在讨论商业保险何时能 ...

  9. POJ 1556 The Doors 线段判交+Dijkstra

    The Doors Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 6734   Accepted: 2670 Descrip ...

  10. Python元组、列表--笔记

    <Python3 程序开发指南> 序列包括元组和列表,首先,我们介绍元组. 元组--tuple 元组为有序的序列,元组和字符串一样也是固定的,不能替换或删除其中的任意数据项.如果需要修改应 ...