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

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

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

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

第一件事情，要申请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. nyoj-204

    描述国王有一个魔镜,可以把任何接触镜面的东西变成原来的两倍——只是,因为是镜子嘛,增加的那部分是反的. 比如一条项链,我们用AB来表示,不同的字母表示不同颜色的珍珠.如果把B端接触镜面的话,魔镜会把这 ...

  2. php一些特殊函数的使用实例详解

    <?php /* * PHP Array 函数大全 * * array() 创建数组. 3 array_change_key_case() 返回其键均为大写或小写的数组. 4 array_chu ...

  3. php-fpm配置文件的优化

    php-fpm中比较重要的两项参数是:request_terminate_timeoutpm.max_children request_terminate_timeout该值决定了php-fpm进程的 ...

  4. Java简单类（部门、领导、雇员关系）

    class Dept { private int deptno ; private String dname ; private String loc ; private Emp emps [] ; ...

  5. ios 修改webView字体

    UIFont *font = [UIFont systemFontOfSize:]; //方法一 NSString *fontColor =@"CCCCFF"; NSString ...

  6. 画廊插件baguetteBox

    HTML <link rel="stylesheet" href="css/baguetteBox.css"> <div class='bag ...

  7. IEnumerable 使用foreach 详解

    自己实现迭代器 yield的使用 怎样高性能的随机取IEnumerable中的值 我们先思考几个问题: 为什么在foreach中不能修改item的值? 要实现foreach需要满足什么条件? 为什么L ...

  8. docker images之间相互通信 link

    同一个host上的两个container 首先启动一个nginx. container起名叫netease_nginx docker run --detach --name netease_nginx ...

  9. Linux下安装APache

    1:在图形界面下下载apache 安装包,我下的是 httpd-2.2.9.tar.gz 源码安装包,地址是http://httpd.apache.org/download.cgi 2:用:gzip ...

  10. java经典算法40题（21-40）

    [程序21]   题目:求1+2!+3!+...+20!的和   1.程序分析:此程序只是把累加变成了累乘.   public class Ex21 { static long sum = 0;  s ...