获取秘钥

账号和获取秘钥

很欣赏百度这个免费的feel，而且大家如果只是个人在本地的浏览器端运行网页，做简单的测试，基本是不受限的。

点击“申请秘钥”去申请秘钥：

设置应用

接下来输入应用名称，基于自己的需要做一下设置：

复制秘钥

可以复制秘钥，后面用得到：

自动生成网页源码

自动生成调用百度地图API的网页代码

复制HTML

注意圈红圈的地方，要换成之前复制好的秘钥：

运行网页

网页源码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" /><meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" /><title>百度地图API自定义地图</title><!--引用百度地图API--><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script></head><body><!--百度地图容器--><div style="width:700px;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div><p style="color:red;font-weight:600">地图生成工具基于百度地图JS api v2.0版本开发，使用请申请密匙。<a href="http://developer.baidu.com/map/index.php?title=jspopular/guide/introduction" style="color:#2f83c7" target="_blank">了解如何申请密匙</a><a href="http://lbsyun.baidu.com/apiconsole/key?application=key" style="color:#2f83c7" target="_blank">申请密匙</a></p></body><script type="text/javascript">//创建和初始化地图函数：function initMap(){createMap();//创建地图setMapEvent();//设置地图事件addMapControl();//向地图添加控件addMapOverlay();//向地图添加覆盖物}function createMap(){ map = new BMap.Map("map"); map.centerAndZoom(new BMap.Point(116.447568,39.932153),12);}function setMapEvent(){map.enableScrollWheelZoom();map.enableKeyboard();map.enableDragging();map.enableDoubleClickZoom()}function addClickHandler(target,window){target.addEventListener("click",function(){target.openInfoWindow(window);});}function addMapOverlay(){}//向地图添加控件function addMapControl(){var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});scaleControl.setUnit(BMAP_UNIT_IMPERIAL);map.addControl(scaleControl);var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});map.addControl(navControl);var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});map.addControl(overviewControl);}var map;initMap();</script>
</html>

深入研究

请阅读百度地图API官方文档

【JavaScript】百度地图API快速上手相关推荐

Html+JavaScript+百度地图api：GPS功能单点运动
在学习jQuery时,浏览到一个比较有意思的网页:jQuery插件库 http://www.jq22.com/,里面有很多封装好的插件库,然后,在地图插件里看到一个比较有意思的功能-路书,一个小车自己 ...
百度地图API快速调用，一键生成百度地图
对于在网站或者网页之内插入百度地图插件,可能很多编程技术人员都知道如何来做,但是做起来所花费的时间都比较长,那么下面跟大家分享一下如何快速调用百度地图API,一件生成百度地图的方法,这种方法适用于任何 ...
百度地图API公交检索示例 - 标绘结果路线、返回结果集
百度地图API具有公交检索功能:使用它的在线SDK示例来修改代码,快速演示一下: <html> <head><meta http-equiv="Content- ...
给网站插入一个百度地图API
其实调用百度API还是比较容易的,你不用去配置对应api的环境. 1.首先,第一步操作,进入百度地图开发文档由于我们进行web开发,选择javasc API 使用流程: 2.照着上面的流程走,然后主 ...
C#调用百度地图API入门解决BMap未定义问题
本文主要是最近帮助好友研究JavaScript的百度地图API,同时显示到C# Winform界面.同时遇到了BMap未定义的错误(BMap is not defined)及解决方法.以前写过基于An ...
百度地图API : 自定义标注图标
通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <!DOCTYPE html> ...
使用百度地图API来完成交大校园巴士时刻表
本文最初发布于我的个人博客:Jerry的乐园交大的校园巴士时刻表都只能在车站的站牌上查看.这对于需要出行的学生来说非常不方便,无法合理做好出行的安排.为了解决这个问题,我和同一个套件的两位同学一起完 ...
（亲测很实用）地理位置批量转经纬度，基于百度地图api
遇到很多地理位置需要得到其经纬度的时候,又不想或者不会写代码就很恼火, 只能一个一个去搜索去一个个复制不管你会不会写前后端代码, 使用下面的方法就可以轻松的实现经纬度的批量查询(提示:基于百度地图a ...
百度地图API 自定义标注图标
通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <script type=" ...

【JavaScript】百度地图API快速上手

获取秘钥

设置应用

复制秘钥

自动生成网页源码

复制HTML

运行网页

网页源码

深入研究

【JavaScript】百度地图API快速上手相关推荐

最新文章

热门文章