百度地图开放平台开发文档中的JavaScript API
准备工作
在使用百度地图之前,我们需要有自己的百度帐号,申请注册成为百度开发者,然后我们需要创建一个浏览器端应用来获取唯一的服务密钥(AK)
申请秘钥
应用程序密钥(AK)
1. 首先我们在我的应用中,点击创建应用
2. 在创建应用的时候我们需要注意应用类型需要我们需要的类型,因为我的是web项目需要,所以这个应用类型我选择的是浏览器端,还有其他应用类型,根据自己的需要自行选择。还有就是这个Referer白名单的设置,根据自己的需求,按照下面的提示,自行配置,这里我为了方便是没有对任何域名做限制,使用的是*
3. 提交之后会在我的应用看到我们需要的秘钥(AK)
我们的准备工作已经完成。这时候我们已经有了自己的访问密钥(AK),那么接下来我们就可以通过一个简单的html来使用我们的百度API了,我们来看看百度地图API的一些使用方法。话不多说,让我们开始吧。
百度地图的实现
1. 首先我们创建一个Hello.html文件
2. 在html中引用百度API(请将自己申请的秘钥(AK)填充一下)
脚本type='text/javascript' src='https://api.map.baidu.com/api?v=3.0ak=yourkey'/script
3. 创建一个地图容器元素
div id='container'/div
4. 设置一下页面以及容器的一些样式
style type='text/css' html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} /style
5. 创建一个地图实例
script type='text/javascript'//创建地图实例var地图=new BMap.Map('容器'); //创建点坐标(北京天安门坐标) var point=new BMap.Point(116.404, 39.915); //初始化地图,设置中心点坐标和地图等级map.centerAndZoom(point, 15);/script 最终html中的内容如下:
!DOCTYPE html htmlhead meta name='viewport' content='initial-scale=1.0, user-scalable=no'/meta http-equiv='Content-Type' content='text/html; charset=utf-8'/titleHello, World/title style type='text/css' html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} /style script type='text/javascript' src='https://api.map。 baidu.com/api?v=3.0ak=你的key'/script/head body div id='container'/divscript type='text/javascript'//创建地图实例var map=new BMap.Map('container' );//创建点坐标(北京天安门坐标) var point=new BMap.Point(116.404, 39.915);//初始化地图,设置中心点坐标和地图等级map.centerAndZoom(point, 15);/script /body /html
6. 百度地图的简单实现
效果如下:可移动、可放大
百度地图API详解
1. 创建容器
根据id获取对应的元素,就是我们后续百度地图要填写的元素。其实在创建容器的时候,还有一个coordsType属性来控制坐标的类型。但是,如果我们不配置它,通常是默认配置。 5 是bd0ll 坐标类型。有兴趣的朋友可以看一下这些坐标类型都是什么?可以来评论区交流学习
var map=new BMap.Map('容器'); //coordsType 指定输入输出坐标类型,3 为gcj02 坐标,5 为bd0ll 坐标,默认为5。 //指定完成后,API 会以指定的坐标类型var map 处理你传入的坐标=new BMap.Map('容器', { coordsType: 5 });
2. 设置中心点
设置中心点有两种方法,一种是上面的方法,根据经纬度设置中心点坐标。第二种方法是以城市名称为中心点。
PS:地图是我们的容器,别忘了
//1.根据经纬度设置中心点//创建点坐标(北京天安门坐标) var point=new BMap.Point(116.404, 39.915);地图.centerAndZoom(点, 15); //2.根据城市设置//以城市名称为中点map.centerAndZoom('Beijing', 12);
3. 设置Zoom值
//Zoom值是一个范围,控制地图的放大和缩小。我们可以控制这个值var map=new BMap.Map( 'mapContent',{minZoom:4,maxZoom:8}); map.centerAndZoom('北京', 15);
4.开启鼠标滚轮缩放
//默认地图只能用鼠标拖动,鼠标滚轮不会修改Zoom值map.enableScrollWheelZoom(true );
5.JSAPI商用授权挂件默认开启,关闭需要修改调用JSAPI的代码。方式有两种
1.初始化地图时,进行关机配置
var map=new BMap.Map('container', {enableBizAuthLogo: false}); 2.使用map方法进行配置
var map=new BMap.Map('container');map.disableBizAuthLogo(); //关闭map.enableBizAuthLogo(); //开启
6.添加地图挂件
1.地图初始化
在添加控件之前,需要初始化地图。例如,要将标准地图控件添加到地图,请将以下内容添加到您的代码中:
var map=new BMap.Map('容器'); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addControl(new BMap.NavigationControl()); 2.添加多个控件
在此示例中,我们向地图添加平移和缩放控件、比例控件和缩略图控件。一旦控件添加到地图上,它们就会立即生效。
map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl()); map.addControl(new BMap.MapTypeControl());地图。 setCurrentCity('北京'); //MapTypeControl的切换功能只能在设置城市信息时使用。
初始化控件时,可以提供一个可选参数,其中anchor和offset属性共同控制控件在地图上的位置。 Anchor代表控件的停靠位置,即控件停靠在地图的哪个角落。当地图大小发生变化时,控件会根据停靠位置调整其位置。
var opts={offset: new BMap.Size(150, 5)}map.addControl(new BMap.ScaleControl(opts));
7.个性化地图
个性化地图样式编辑器
通过样式ID调用个性化地图样式(推荐)
1.创建个性化地图样式
进入地图开放平台控制台页面,在我的地图中创建地图样式:
2. 编辑样式
点击创建好的地图样式,进入样式编辑器,根据需要自由编辑地图样式:
3.发布样式并获取样式ID
编辑完成后,在我的地图或者编辑器中发布地图样式即可获取发布后生成的样式ID:
4. 在JavaScript API 中应用地图样式
将第三步获取到的样式ID作为setMapStyleV2方法的参数。
相关代码如下:
map.setMapStyleV2({ styleId: '3d71dc5a4ce6222d3396801dee06622d'});注意:1、使用个性化地图前,请参考Hello World搭建基础地图; 2、setMapStyleV2方法需要在地图初始化(centerAndZoom)完成后执行; 3.样式更新不会改变样式ID。因此,如果需要更新样式,可以通过重新编辑发布来完成更新。无需修改JavaScript API调用代码; 4. 如果在控制台删除了样式ID,但是JavaScript API仍然被调用。然后就会渲染出默认样式的地图;
通过样式JSON调用个性化地图样式
1. 获取样式JSON
前置过程与通过样式ID调用地图样式的过程相同。进入我的地图,创建地图样式,进入编辑器编辑完成后,通过编辑器中的“下载JSON”功能直接获取JSON代码:
2. 在JavaScript API 中应用地图样式
使用上一步获取的样式JSON作为setMapStyleV2方法的参数。
相关代码如下:
var styleJson=[];map.setMapStyleV2({styleJson:styleJson});设置后,地图效果如下:
标题:百度地图API基本使用(一)
链接:https://www.7kxz.com/news/sypc/39608.html
版权:文章转载自网络,如有侵权,请联系删除!
用户评论
我在尝试了百度地图API后发现, 它在实现导航功能方面出类拔萃。
有11位网友表示赞同!
文章对基础知识讲述得清晰易懂,适合新手。
有14位网友表示赞同!
作为一个开发者,我发现这里的示例非常实用。
有17位网友表示赞同!
'百度地图API基本使用(一)'给我提供了很好的入门途径。
有8位网友表示赞同!
这个教程非常适合寻找简单直白的地图集成技巧的游戏玩家。
有8位网友表示赞同!
按照步骤操作后,我成功地在游戏内添加了路线规划功能。
有11位网友表示赞同!
通过这篇文章,我对如何使用百度地图API有了更深的理解。
有15位网友表示赞同!
新手玩家可以轻松上手,理解API的基础用法。
有15位网友表示赞同!
'一'的标识表明这将是系列文章中的第一部分,让我充满期待。
有16位网友表示赞同!
跟着这个教程,我能够快速集成百度地图服务到我的游戏中。
有10位网友表示赞同!
对于游戏开发者来说,这篇指南是一个值得探索的资源。
有11位网友表示赞同!
文章中对API的详细介绍帮助我避免了大量的摸索和错误
有18位网友表示赞同!
学习了之后,我在游戏中的移动功能得到了显著提升。
有11位网友表示赞同!
'基本使用'这个词组表明适合基础到中级程度的学习者。
有5位网友表示赞同!
通过实践练习,我发现自己的编程技能有了明显的成长。
有12位网友表示赞同!
百度地图API的基本教程对我来说是一个巨大的优势。
有10位网友表示赞同!
这个系列对于想要提高移动应用开发能力的玩家来说非常宝贵。
有17位网友表示赞同!
我找到了很好的方法来理解API中的核心概念和术语。
有15位网友表示赞同!
跟着指南实践,我对API的每个步骤都有清晰的认识。
有10位网友表示赞同!
这个文章使得地图集成的过程变得容易理解。
有18位网友表示赞同!
阅读后,我在项目中无缝融入了百度地图功能。
有16位网友表示赞同!