最近在完成优达学城前端开发（入门）课程的P4项目中，要求调用google地图进行交互，项目已提供部分js代码和html代码。但在申请google地图API密钥时由于网络等原因，打不开或者连接超时，所以想着地图应该是相似的，百度地图可能也能实现这样的功能，于是就开始了百度地图JavaScript API使用的学习探究了。

简单介绍：百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，它能够帮助您在网站中构建功能丰富、交互性强的地图应用，包含了构建地图基本功能的各种接口，提供了诸如本地搜索、路线规划等数据服务。

一、获取AK

为了统一平台服务的配额管理，JavaScript API在新版本引入ak机制。JavaScript API v1.4及以前版本无须申请密钥（ak），自v1.5版本开始需要先申请密钥（ak），才可使用，如需获取更高配额，需申请认证企业用户。

1.注册。注册并登录百度地图开放平台。

2.在API控制台中创建应用：

提交完成后，

中间这一长串就是我们申请的AK了。

二、html页面接入百度地图

主要代码： <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=FNPat11O65z0oriZtFZkc9hPSKh4rrD2"></script>这里的ak就是上面申请到的AK了。

<!DOCTYPE html>

<html>

<head>

  <!-- This tells the browser how to read the document. -->

  <meta charset="utf-8">

  <!-- Tells the browser what the title of this page should be. -->

  <title>Resume</title>

  <!-- Load the page styles. -->

  <link href="css/style.css" rel="stylesheet">

   <script src="js/jQuery.js"></script>

  <script src="js/helper.js"></script>

  <!--

  Uncomment the <script> tag below when you're ready to add an interactive Google Map to your resume!

  -->

<!-- <script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script> -->

  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XGWB03IDfnqGTzqm7jTDXKMSLA8m1nGg"></script>

  <meta name="viewport" content="width=device-width,initial-scale=1">

</head>

<body>

  <div id="main">

    <div id="header" class="center-content clear-fix">

      <ul id="topContacts" class="flex-box"></ul>

    </div>

    <div style="clear: both;"></div>

    <div id="workExperience" class="gray">

      <h2>Work Experience</h2>

    </div>

    <div id="projects">

      <h2>Projects</h2>

    </div>

    <div id="education" class="gray">

      <h2>Education</h2>

    </div>

    <div id="mapDiv">

      <h2>Where I've Lived and Worked</h2>

    </div>

    <div id="lets-connect" class="dark-gray">

      <h2 class="orange center-text">Let's Connect</h2>

      <ul id="footerContacts" class="flex-box">

      </ul>

    </div>

  </div>

  <script src="js/resumeBuilder.js"></script>

  <script>

    if(document.getElementsByClassName('flex-item').length === 0) {

      document.getElementById('topContacts').style.display = 'none';

    }

    if(document.getElementsByTagName('h1').length === 0) {

      document.getElementById('header').style.display = 'none';

    }

    if(document.getElementsByClassName('work-entry').length === 0) {

      document.getElementById('workExperience').style.display = 'none';

    }

    if(document.getElementsByClassName('project-entry').length === 0) {

      document.getElementById('projects').style.display = 'none';

    }

    if(document.getElementsByClassName('education-entry').length === 0) {

      document.getElementById('education').style.display = 'none';

    }

    if(document.getElementsByClassName('flex-item').length === 0) {

      document.getElementById('lets-connect').style.display = 'none';

    }

    if(document.getElementById('map') === null) {

      document.getElementById('mapDiv').style.display = 'none';

    }

  </script>

</body>

</html>

三、js代码部分：

/*地图*/
var map= new BMap.Map("map");
var point = new BMap.Point(120.702359,27.920799);//温州的经度和纬度：在经纬度范围内取经度和纬度就行
map.centerAndZoom(point, 13);//缩放倍数
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("温州"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
/*第二种方法:
var map= new BMap.Map("map");
map.centerAndZoom("温州",13);
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
*/

/*地图标注locations*/

var index = 0;

var myGeo = new BMap.Geocoder();//baidu地图地址解析函数；

var locations =[

"温州市鹿城区丹璐广场欧洲城一期4幢1102","浙江省温州市瓯海区茶山镇茶山高教园区","温州大学瓯江学院创业工作室北校区7号楼1020","温州市鹿城区车站大道2号展宏大厦"];
//注意：具体地点最好自己现在百度地图了找了，把百度地图上显示的地址复制过来，毕竟百度地图不够智能化。

function bdGEO(){

		var location = locations[index];

		geocodeSearch(location);

		index++;

}

function geocodeSearch(location){

	if(index < locations.length){

			setTimeout(window.bdGEO,400);

	}

	myGeo.getPoint(location, function(point){

		if (point) {

			var address = new BMap.Point(point.lng, point.lat);//将地理位置转换为经纬度；

			addMarker(address,new BMap.Label(location,{offset:new BMap.Size(20,-10)}));//添加标注及地点信息

		}

	}, "温州市");

}

/*编写自定义函数,创建标注*/

function addMarker(point,label){

		var marker = new BMap.Marker(point);

		map.addOverlay(marker);

		marker.setLabel(label);

}

bdGEO();

/*单击鼠标添加标注*/

var x="";

var y="";

function showInfo(e){

        x=e.point.lng;   //获取鼠标当前点击的经纬度

        y=e.point.lat;

        if(x != "" && y != ""){

            var point = new BMap.Point(x,y);

            map.centerAndZoom(point);

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

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

        }

        var point = new BMap.Point(x,y);  //获取当前地理名称

   		var gc = new BMap.Geocoder();

        gc.getLocation(point, function(rs){

        var addComp = rs.addressComponents;

        alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);

     });

}

map.addEventListener("click", showInfo);

完成上面三步，百度地图互动效果就完成了。

如果还想了解更多有关百度地图Javascript API的话，登录百度地图开放平台：http://lbsyun.baidu.com/index.php?title=jspopular，这里有示例demo，可以在线修改代码，运行效果，可以更清晰直观地了解你想了解的。

百度地图JavaScript API使用的更多相关文章

  1. 百度地图JavaScript API覆盖物旋转时出现偏移

    在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...

  2. 百度地图JavaScript API经纬度查询-MAP

    百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...

  3. 【百度地图JavaScript API】手机端浏览器定位的实现

    [百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476

  4. 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题

    项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...

  5. 百度地图JavaScript API本地搜索的结果面板

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. 百度地图 JavaScript API

    最近有点懒  项目结尾了  完了好长时间 没有去总结项目中的问题 想了下还是写写吧 这是一个关于百度地图的 网页展示 <!DOCTYPE html><html><head ...

  7. 百度地图 Javascript API 笔记

    因为最近的一个项目用到,所以自己整理了一下遇到的一些坑 自己写了一个类库来二次封装用于调起常用的功能:https://github.com/iRuxu/iBMap 快速文档链接 Javascript ...

  8. 百度地图JavaScript API获取用户当前经纬度和详细地理位置，反之通过详细地理位置获取当前经纬度

    前言: 前端时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置和通过当前用户详细地理位置换取用户当前经纬度坐标的功能,为了方便下次找起来方便一些自己在这里记录一下,希望也能够 ...

  9. 百度地图 JavaScript API 极速版 开发体会

    前段时间百度地图API推出了 JavaScript API 极速版 1.0 简单看了一下,从产品定位来说真是挺好. 把开发人员细分成普通web开发人员和移动web开发人员.正好用到了手机地图这块决定尝 ...

随机推荐

  1. grid编辑后时间格式不对问题

    在column中应该定义xtype和format格式: xtype: 'datecolumn', format:'Y-m-d'   之后正常

  2. vue组件（Vue+webpack项目实战系列之三）

    组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.特别对于大型应用开发来说,尽量组件化,并且先造好轮子库,不要重复去写组件,这会显著提升项目 ...

  3. Volley源码分析一

    Volley源码分析 虽然在2017年,volley已经是一个逐渐被淘汰的框架,但其代码短小精悍,网络架构设计巧妙,还是有很多值得学习的地方. 第一篇文章,分析了请求队列的代码,请求队列也是我们使用V ...

  4. java——国际化详解

    深入理解Java国际化 假设我们正在开发一个支持多国语言的Web应用程序,要求系统能够根据客户端的系统的语言类型返回对应的界面:英文的操作系统返回英文界面,而中文的操作系统则返回中文界面--这便是典型 ...

  5. leetcode-486-Predict the Winner

    Given an array of scores that are non-negative integers. Player 1 picks one of the numbers from eith ...

  6. “HK”的日常之ARP断网攻击

    ARP断网攻击是什么?可以吃吗?如果可以吃它好吃吗? ARP断网攻击就是通过伪造IP地址和MAC地址实现ARP欺骗,能够在网络中产生大量的ARP通信量使网络阻塞,攻击者只要持续不断的发出伪造的ARP响 ...

  7. FastJson对于JSON格式字符串、JSON对象及JavaBean之间的相互转换

    fastJson对于json格式字符串的解析主要用到了一下三个类: JSON:fastJson的解析器,用于JSON格式字符串与JSON对象及javaBean之间的转换. JSONObject:fas ...

  8. Redis初体验

    简介        Redis是一个速度非常快的非关系型数据库,它不仅性能强劲,而且还具有复制特性以及为解决问题而生的独一无二的数据模型.作为键值型数据库,Redis支持5中数据类型:字符串,列表,集 ...

  9. 入门Android开发

    一个工作1年多一点的前端狗,由于公司需要,开始接触Android,也是第一次写博客,以后学到的技术每天都会写篇博客,让我们一起进步. Android 系统开发应用程序,为我们提供了哪些东西. 一.四大 ...

  10. Spring源码：IOC原理解析（二）

    版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! 接着上一章节的内容,我们来分析当new一个FileSystemXmlApplicationContext对象的时候,spring到底做了那 ...