Baidu Map Web API 案例

<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>
时间: 2024-12-17 04:32:35

Baidu Map Web API 案例的相关文章

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

依然chsakell,他写了一篇前端AngularJS,后端OData,ASP.NET Web API的Demo,关于OData在ASP.NET Web API中的正删改查没有什么特别之处,但在前端调用API时,把各种调用使用$resouce封装在一个服务中的写法颇有借鉴意义. 文章:http://chsakell.com/2015/04/04/asp-net-web-api-feat-odata/源码:https://github.com/chsakell/odatawebapi 首先是领域模

ASP.NET Core Web API下事件驱动型架构的实现(一):一个简单的实现

很长一段时间以来,我都在思考如何在ASP.NET Core的框架下,实现一套完整的事件驱动型架构.这个问题看上去有点大,其实主要目标是为了实现一个基于ASP.NET Core的微服务,它能够非常简单地订阅来自于某个渠道的事件消息,并对接收到的消息进行处理,于此同时,它还能够向该渠道发送事件消息,以便订阅该事件消息的消费者能够对消息数据做进一步处理.让我们回顾一下微服务之间通信的几种方式,分为同步和异步两种.同步通信最常见的就是RESTful API,而且非常简单轻量,一个Request/Resp

ABP 教程文档 1-1 手把手引进门之 AngularJs, ASP.NET MVC, Web API 和 EntityFramework(官方教程翻译版 版本3.2.5)含学习资料

本文是ABP官方文档翻译版,翻译基于 3.2.5 版本 转载请注明出处:http://www.cnblogs.com/yabu007/  谢谢 官方文档分四部分 一. 教程文档 二.ABP 框架 三.zero 模块 四.其他(中文翻译资源) 本篇是第一部分的第一篇. 第一部分分三篇 1-1 手把手引进门 1-2 进阶 1-3 杂项 (相关理论知识) 第一篇含两个步骤. 1-1-1 ASP.NET Core & Entity Framework Core 后端(内核)含两篇 ( 第一篇链接    

用VSCode开发一个asp.net core2.0+angular5项目(5): Angular5+asp.net core 2.0 web api文件上传

第一部分: http://www.cnblogs.com/cgzl/p/8478993.html 第二部分: http://www.cnblogs.com/cgzl/p/8481825.html 第三部分: https://www.cnblogs.com/cgzl/p/8525541.html 第四部分: https://www.cnblogs.com/cgzl/p/8536350.html 这部分就讲从angular5的客户端上传图片到asp.net core 2.0的 web api. 这是

01 web api接口

WEB API接口 接口介绍 接口概念:前台与后台进行信息交互的媒介 - url连接 https://api.map.baidu.com/place/v2/search 接口组成: url链接 - 长得像返回数据的url链接 请求方式 - get(查).post(增).put(整体改).patch(局部改).delete(删) 请求参数 - 拼接参数.数据包参数(urlencoded.form-data.json) ak:6E823f587c95f0148c19993539b99295 regi

C#开发微信门户及应用(47) - 整合Web API、微信后台管理及前端微信小程序的应用方案

在微信开发中,我一直强调需要建立一个比较统一的Web API接口体系,以便实现数据的集中化,这样我们在常规的Web业务系统,Winform业务系统.微信应用.微信小程序.APP等方面,都可以直接调用基于JSON数据格式的Web API接口,在我之前的几篇随笔中,对这方面都有一定的介绍,本篇继续这个主题,细致深入的阐述如何在接口和源码的基础上整合Web API.微信后台管理及前端微信小程序的应用方案. 1.基于Web API的微信开发框架 首先我们各个业务模块,都应该围绕着Web API进行展开,

ASP.NET Web API 2基于令牌的身份验证

基于令牌的认证 我们知道WEB网站的身份验证一般通过session或者cookie完成的,登录成功后客户端发送的任何请求都带上cookie,服务端根据客户端发送来的cookie来识别用户. WEB API使用这样的方法不是很适合,于是就有了基于令牌的认证,使用令牌认证有几个好处:可扩展性.松散耦合.移动终端调用比较简单等等,别人都用上了,你还有理由不用吗? 下面我们花个20分钟的时间来实现一个简单的WEB API token认证: Step 1: 新建一个空的WEB API项目,项目名称就设置为

Web API应用架构在Winform混合框架中的应用(1)

在<Web API应用架构设计分析(1)>和<Web API应用架构设计分析(2)>中对WebAPI的架构进行了一定的剖析,在当今移动优先的口号下,传统平台都纷纷开发了属于自己的Web API平台,方便各种终端系统的接入,很多企业的需求都是以Web API优先的理念来设计整个企业应用体系的.Web API作为整个纽带的核心,在整个核心层需要考虑到统一性.稳定性.以及安全性等方面因素.本文主要介绍,Web API应用架构,在Winform整合中的角色,以及如何实现在Winform混合

ASP.NET MVC Web API 学习笔记---Web API概述及程序示例

1. Web API简单说明 近来很多大型的平台都公开了Web API.比如百度地图 Web API,做过地图相关的人都熟悉.公开服务这种方式可以使它易于与各种各样的设备和客户端平台集成功能,以及通过在浏览器中使用 JavaScript来创建更丰富的HTML体验.所以我相信Web API会越来越有它的用武之地. 说道Web API很多人都会想到Web服务,但是他们仍然有一定的区别:Web API服务是通过一般的 HTTP公开了,而不是通过更正式的服务合同 (如SOAP) 2. ASP.NET W