<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. AOP Concepts

    As with most technologies, AOP comes with its own specific set of concepts and terms. It is importan ...

  2. HDU2050（分平面问题）

    分平面问题: 一.n条直线最多分平面问题. n条直线最多可以把平面分成多少个区域? 此类问题主要采用递归的思想.当有n-1条直线时,平面最多被分成了f(n-1)块区域.如果要使第n条直线分的区域最多, ...

  3. Java8 时间 API

    前言 Java8 中最为人津津乐道的新改变恐怕当属函数式 API 的加入.但实际上,Java8 所加入的新功能远不止这个. 本文将基于<Java SE8 for the Really Impat ...

  4. 关于storm群集容错概念的简单介绍

    1.当一个worker死掉会发生什么?        当一个worker死掉,那么supervisor会重新启动这个worker.如果它总是启动失败将不能发送心跳到nimbus,那么nimbus将把这 ...

  5. Effective C++ 第二版 40)分层 41)继承和模板 42)私有继承

    条款40 通过分层来体现"有一个"或"用...来实现" 使某个类的对象成为另一个类的数据成员, 实现将一个类构筑在另一个类之上, 这个过程称为 分层Layeri ...

  6. Drupal 实战

    <Drupal 实战> 基本信息 作者: 葛红儒    丛书名: 实战系列 出版社:机械工业出版社 ISBN:9787111429999 上架时间:2013-6-28 出版日期:2013 ...

  7. Qemu之Network Device全虚拟方案一：前端网络流的建立

    KVM在I/O虚拟化方面,传统的方式是使用Qemu纯软件的方式来模拟I/O设备,当中包含常常使用的网卡设备.这次我们重点分析Qemu为实现网络设备虚拟化的全虚拟化方案.本主题从三个组成方面来完整描写叙 ...

  8. 经典算法:快排的Javascript版本

    function swap(arr,l,r){ var temp=arr[l]; arr[l]=arr[r]; arr[r]=temp; } function partition(arr,camp,l ...

  9. apache在windows上开启gzip的方法

    环境搭建好之后,默认并没有开启gzip功能.需要修改apache的httpd.conf配置文件进行开启.开启方法如下:1. httpd.conf中打开deflate_Module和headers_Mo ...

  10. 百度——LBS.云 v2.0——创建自己的地理云数据

    随着云技术和地理信息(GIS)技术的发展,今年终于进入了.地理分享的新纪元.百度提供了LBS的云存储.真是个不错的功能.下面让我们来看看如何使用吧. 1.注册百度开发者账号(此处略去88个字) 2.创 ...