初步接触了高德地图嵌入到网站应用中的知识后，对高德地图提供的文档，源码以及使用快捷，方便非常满意。

　　由此，利用周末时间研究了下如何使用 百度地图 。

总的来说，方式方法都差不多，都提供了源码和文档实例。但个人认为高德的文档比较扎实，我看着一下就明白啥意思了。

下面开始说如何使用 【百度地图】加载到网页中。

第一件事情，要申请key，地址为：http://lbsyun.baidu.com/apiconsole/key

第二件事情，就是到地图实例中拷贝功能代码，地址为：http://developer.baidu.com/map/jsdemo.htm#a1_2

另外需要了解下经纬度的可以到这个地址看看：http://www.gpsspg.com/maps.htm

申请KEY需要注册百度开发者中心账号和密码，也可以用QQ注册登录 ；

登录账号|注册新账号

成功登录后点击【创建应用】，填入相应信息，点击保存自动生成AK值，这个就是地图要用到的认证了。

将如下 AK 下的字符串拷贝出来，这是以后地图的唯一认证标识 。

现在开始编写代码的征程 -------------

首先，打开百度地图开发者代码实例

可根据自己的需要定制地图功能 ，如下是我定制的几个简单功能代码实例 （可以替换成HTML运行的）

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">

    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

    </style>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=输入你申请的KEY"></script>

    <title>首页-地图</title>

</head>

<body>

    <h1>地图应用中心</h1>

    <div style="height:380px;width:80%;margin:0 auto;">

        <div id="allmap"></div>

    </div>

</body>

<%-- 百度地图 - 初始化 --%>

<script type="text/javascript">

    //------------基本功能

    // 百度地图API功能

    var map = new BMap.Map("allmap"); // 创建Map实例

    var point = new BMap.Point(116.404, 39.915);//设置中心点坐标【经度，纬度】

    map.centerAndZoom(point, 16); // 初始化地图,地图级别[级别：1-20]

    map.addControl(new BMap.MapTypeControl()); //添加地图类型控件

    map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的

    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

    //------------自动定位&缩放功能

    // 添加带有定位的导航控件

    var navigationControl = new BMap.NavigationControl({

        // LARGE类型

        type : BMAP_NAVIGATION_CONTROL_LARGE,

        // 靠左上角位置

        anchor : BMAP_ANCHOR_TOP_LEFT,

        // 启用显示定位

        enableGeolocation : true

    });

    map.addControl(navigationControl);

    //------------- 动画标注

    var marker = new BMap.Marker(point);  // 创建标注

    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

    marker.enableDragging(); //marker可拖拽

    map.addOverlay(marker);  // 将标注添加到地图中 */

    //------------- 单点标注信息

    var opt = {

      width : 210,     // 信息窗口宽度

      height: 100,     // 信息窗口高度

      title : "海底捞王府井店" , // 信息窗口标题

      enableMessage:true,//设置允许信息窗发送短息

      message:"信息内容 。。。"

    }

    var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opt);  // 创建信息窗口对象

    marker.addEventListener("click", function(){

        map.openInfoWindow(infoWindow,point); //开启信息窗口

    });

    //---------------- 多点标注信息

    var data_info = [[116.417854,39.921988,"地址：北京市东城区王府井大街88号乐天银泰百货八层"],

                     [116.406605,39.921585,"地址：北京市东城区东华门大街"],

                     [116.412222,39.912345,"地址：北京市东城区正义路甲5号"]

                    ];

    var opts = {

                width : 250,     // 信息窗口宽度

                height: 80,     // 信息窗口高度

                title : "信息窗口" , // 信息窗口标题

                enableMessage:true//设置允许信息窗发送短息

               };

    for(var i=0;i<data_info.length;i++){

        var markers = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]));  // 创建标注

        var content = data_info[i][2];

        map.addOverlay(markers);               // 将标注添加到地图中

        addClickHandler(content,markers);

    }

    function addClickHandler(content,markers){

        markers.addEventListener("click",function(e){

            openInfo(content,e)}

        );

    }

    function openInfo(content,e){

        var p = e.target;

        var points = new BMap.Point(p.getPosition().lng, p.getPosition().lat);

        var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象

        map.openInfoWindow(infoWindow,points); //开启信息窗口

    }

    //------------ 单机获取经纬度

    map.addEventListener("click",function(e){

        alert("该地标经纬度分别是 ：经度 ["+e.point.lng + "] , 纬度  [" + e.point.lat+"]");

    });

    //------------- 判断图块加载完毕事件

    map.addEventListener("tilesloaded",function(){

        //alert(" 地图加载完毕 ");

    });

</script>

</html>

　　至此，简单的地图应用就可以嵌入到网站当中了 。

细话 - 如何在web应用中使用百度地图的更多相关文章

  1. 如何在HTMl网页中插入百度地图

    方法/步骤 1.打开"百度地图生成器"的网址:http://api.map.baidu.com/lbsapi/creatmap/index.html 如下图: 2.在"1 ...

  2. [译]如何在Web开发中使用Python

    [译]如何在Web开发中使用Python 原文:HOWTO Use Python in the Web 摘要 这篇文档展示了Python如何融入到web中.它介绍了几种Python结合web服务器的方 ...

  3. Spring 如何在 WEB 应用中使用

    1. Spring 如何在 WEB 应用中使用 ? 1). 需要额外加入的 jar 包: spring-web-4.0.0.RELEASE.jar spring-webmvc-4.0.0.RELEAS ...

  4. 如何在vue单页应用中使用百度地图

    作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...

  5. Vue --》 如何在vue中调用百度地图

    1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...

  6. React中使用百度地图API

    今天我们来搞一搞如何在React中使用百度地图API好吧,最近忙的头皮发麻,感觉身体被掏空,所以很久都没来写博客了,但今天我一定要来一篇好吧 话不多说,我们直接开始好吧 特别注意:该React项目是用 ...

  7. C# 程序中嵌入百度地图

    本例是对WinForm中使用百度地图的简要介绍.百度地图目前支持Android开发,IOS开发,Web开发,服务接口,具体可以参照'百度地图开放平台'. [动态加载百度地图]涉及到的知识点: WebB ...

  8. 在ionic/cordova中使用百度地图插件

    在ionic项目中,如果想实现定位功能,可以使用ng-cordova提供的cordova-plugin-geolocation. 但由于高墙的缘故,国内andorid环境下,此插件不起作用(ios环境 ...

  9. Android 百度地图开发（一）--- 申请API Key和在项目中显示百度地图

      标签: Android百度地图API Key  分类: Android 百度地图开发(2)    最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地 ...

随机推荐

  1. LFS初次成功+如何粘贴复制LFS命令

    搞了几次LFS,终于成功了,总算舒了一口气. 这次搞LFS用到的资料:LFS文档:http://www.ha97.com/book/lfs-book-6.6/index.html  一份简单的指导文章 ...

  2. MVC Pager 使用

    MVC Pager  4.0+     3.0版本使用  ,直接来点使用的.一看就明白 @Ajax.Pager(Model,pagerOptions,mvcAjaxOptions); @using W ...

  3. CSS之border

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. git -c diff.mnemonicprefix=false -c core.quotepath=false -c credential.helper=sourcetree fetch origin

    git -c diff.mnemonicprefix=false -c core.quotepath=false -c credential.helper=sourcetree fetch origi ...

  5. 关于scrollWidth,clientWidth,offsetWidth

    scrollWidth:对象的实际内容的宽度,不包含边线(border)的宽度,会随对象的内容可视区后而变大. scrollHeight:对象的实际内容的高度,不包含边线(border)的宽度,会随对 ...

  6. Fiddler- -Composer创建和发送HTTP Request

    Fiddler的功能还有很多, 很多功能都没有被挖掘出来.这次我们介绍Fiddler中的一个非常有用的功能Composer,是用来创建和发送HTTP Request的.Composer的使用方法很简单 ...

  7. tcp_tw_recycle 的问题, 使用某一个wifi，APP老是连接不上网络

    ss -tan 反映出来的情况就是在服务器上抓包,发现有SYN包,但服务器就是不回ACK包,因为SYN包已经被丢弃了.为了验证这一结果,可以执行netstat -s | grep timestamp ...

  8. vue.js慢速入门（2）

    4.组件使用基础 什么是组件?组件可以理解为可重用的自定义HTML. 可以使用一堆组件来构造大型应用,任意类型的应用界面都可以抽象为一个组件树: 可以把组件代码按照template.style.scr ...

  9. matlab中动态绘图并保存为视频的小例子

    如题,多的就不说了,先上一个效果: 每隔0.1秒,绿色的直线转动一个角度. 再看看代码如何实现: fuction main clear; clc; %%%%%%%%%%%%%%%%%%%%%%%%%% ...

  10. sdutoj 2606 Rubik’s cube

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2606 Rubik’s cube Time Li ...