百度地图API的使用教程以及案例

一、注册

百度地图：掌握当前的位置在网页显示位置，插入地图拖拽，点击事件。

注意：定位距离公交不关心

官网：点我进入百度地图官网

应用场景：网页插入百度地图

二、获取账号和密钥

三、插入地图

创建地图容器元素设置大小

 #container {width: 1300px;height: 600px;border: 1px solid #999;}

  <div id="container"></div>

引用百度地图API文件

<script src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

创建地图实例

四、添加控件

效果

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#container {width: 1300px;height: 600px;border: 1px solid #999;}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=oek2hHpa3PhlyQe2WYDz5xtiIexpaeqi"></script>
</head><body><div id="container"></div><script>//1.创建地图实例var map = new BMap.Map("container");//2.设置中心点坐标  BMap命名空间下的Point类来创建一个坐标点var point = new BMap.Point(116.404, 39.915);//3.地图初始化，同时设置地图展示级别  (3-19)map.centerAndZoom(point, 15);//4.鼠标滚轮  开启鼠标滚轮缩放map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放//5.添加控件//平移缩放控件 NavigationControl   PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能map.addControl(new BMap.NavigationControl());//比例尺 ScaleControl 默认位于地图左下方，显示地图的比例关系map.addControl(new BMap.ScaleControl());//缩略地图 OverviewMapControl    默认位于地图右下方，是一个可折叠的缩略地图map.addControl(new BMap.OverviewMapControl());//地图类型    MapTypeControl  默认位于地图右上方map.addControl(new BMap.MapTypeControl());var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, //位置type: BMAP_NAVIGATION_CONTROL_SMALL //类型}map.addControl(new BMap.NavigationControl(opts));</script></body></html>

五、标注

代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#container {width: 1300px;height: 600px;border: 1px solid #999;}</style><script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=gGU58LULTYYEvYcqn8IQ5ZaEsqtaa1pj"></script>
</head><body><div id="container"></div><script>// 创建地图实例var map = new BMapGL.Map("container");//设置中心点坐标 BMap命名空间下的Point类来创建一个坐标点var point = new BMapGL.Point(116.404, 39.915);//地图初始化 同时设置地图的级别(3-19)map.centerAndZoom(point, 15);//鼠标滚轮 开启鼠标滚轮缩放map.enableScrollWheelZoom(true);//添加标注var marker = new BMapGL.Marker(point);map.addOverlay(marker); // 将标注添加到地图中//添加监听事件marker.addEventListener("click", function() {alert("您点击了标注");});</script>
</body></html>

也可以自定义标注图标

六、信息窗口

效果如下

代码如下

         //InfoWindow信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息//注意：同一时刻只能有一个信息窗口在地图上打开var opts = {width: 250, // 信息窗口宽度height: 100, // 信息窗口高度title: "Hello World" // 信息窗口标题}// 创建信息窗口对象var infoWindow = new BMapGL.InfoWindow("你好 世界", opts);// 打开信息窗口  地图的中心位置map.getCenter() //  map.openInfoWindow(infoWindow, map.getCenter());map.openInfoWindow(infoWindow, point)//点击marker标注——打开信息窗口marker.addEventListener('click', function() {map.openInfoWindow(infoWindow, point);})

七、正/逆地址解析

 // 地址解析服务提供从地址转换到经纬度的服务，反之，逆地址解析则提供从经纬度坐标转换到地址的转换功能。var myGeo = new BMapGL.Geocoder();// 将地址解析结果显示在地图上，并调整地图视野myGeo.getPoint('湖南省长沙市岳麓区岳麓书院', function(point) {if (point) {map.centerAndZoom(point, 16);map.addOverlay(new BMapGL.Marker(point, {title: '湖南省长沙市岳麓区'}))} else {alert('您选择的地址没有解析到结果！');}}, '湖南省');

百度地图API的使用教程以及案例相关推荐

百度地图api php开发教程,百度地图API使用方法详解_PHP
最近做了个项目,其中项目中有个需求需要用到百度地图进行导航,通过查阅相关资料参考百度地图api完成了一个例子. 示例一: API地址:http://developer.baidu.com/map/js ...
百度地图api php开发教程,百度地图API使用方法详解_php实例
最近做了个项目,其中项目中有个需求需要用到百度地图进行导航,通过查阅相关资料参考百度地图api完成了一个例子. 示例一: API地址:http://developer.baidu.com/map/js ...
Android百度地图API使用教程
课1 百度地图应用百度地图.ppt 百度地图API:API文档 http://wiki.lbsyun.baidu.com/cms/androidsdk/doc/v3_2_0/ 67个类:其中6大核心 ...
百度地图截图java_[Java教程]百度地图API 简单使用
[Java教程]百度地图API 简单使用 0 2015-08-24 19:00:12 最近项目上需要用到百度地图进行导航,参考百度地图API完成一个例子.API地址:http://developer. ...
java 微信百度地图_[Java教程]H5微信通过百度地图API实现导航方式二
[Java教程]H5微信通过百度地图API实现导航方式二 0 2017-08-01 23:53:20 要有服务器才行哦 body, html {width: 100%;height: 100%;mar ...
小地图案例：通过百度地图API将整个html渲染出地图
文章目录前言一.API是什么? 二.百度的API获取 1.搜索 2.找到API文档 3.找到相对应的代码节点 4.前期配置编写地图代码 5.更改配置项 6.最终效果总结(小Tips) 前言家喻 ...
百度地图API的使用(附案例)
文章目录 JavaScript API GL 一.申请秘钥 Hello World 显示地址案例定位功能步行导航搜索功能地铁路线规划 JavaScript API GL 百度地图JavaScr ...
html标签怎么制作足迹地图,用百度地图API做个人足迹地图教程
上次折腾了个人百度足迹地图,积累了点经验,现分享给大家,如有兴趣都可以学着做一个.二话不说,先放出代码,点击下载. 压缩包含三个文件以及一个文件夹,其中"x1.php"是主题模板, ...
百度地图API实例教程
这几天比较空闲,就接触了下百度地图API (开发者中心链接地址:http://developer.baidu.com),发现调用还是挺方便的.只要简单几步注册下,就可以获得一个Key,就能直接调用( ...

百度地图API的使用教程以及案例

百度地图API的使用教程以及案例

一、注册

二、获取账号和密钥

三、插入地图

四、添加控件

五、标注

也可以自定义标注图标

六、信息窗口

七、正/逆地址解析

百度地图API的使用教程以及案例相关推荐

最新文章

热门文章

百度地图API的使用教程以及案例

百度地图API的使用教程以及案例

一、注册

二、获取账号和密钥

三、插入地图

四、添加控件

五、标注

也可以自定义标注图标

六、 信息窗口

七、正/逆地址解析

百度地图API的使用教程以及案例相关推荐

最新文章

热门文章

六、信息窗口