0

0

百度地图api如何使用_javascript技巧

php中文网

php中文网

发布时间:2016-05-16 15:47:34

|

2327人浏览过

|

来源于php中文网

原创

如果想用百度地图api,首先需要先获取一个百度地图api的密钥,然后引入百度地图的api,接下来,我们详细介绍下获取、引入api密钥的技巧,以及通过代码给大家详解下百度地图api如何使用,具体请看下文。

首先 ,如果想调用百度地图api,你需要获取一个百度地图api的密钥。

申请密钥很简单,在百度地图api的首页就有相关链接,填写相关信息百度就会给你一个密钥了。

接下来,就是引入百度地图的api

关键代码如下:

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:



接下来我们就可以创建一个地图试试看了。(Js代码)

复制代码 代码如下:

var map = new BMap.Map("container");          // 创建地图实例
var point = new BMap.Point(120.391655,36.067588);  // 创建点坐标
map.centerAndZoom(point, 15);
//map.centerAndZoom("北京", 15);
//map.centerAndZoom("Hongkong", 15);    
           
这里需要说明三点:

1.map.centerAndZoom方法创建地图,第一个参数可以是根据之前创建好的一个点为中心,创建出地图,也可以根据城市地区的中文名称创建地图。(如果拼写正确,可以根据城市的英文名称来创建)

2. map.centerAndZoom第二个参数是地图缩放级别,最大为19,最小为0。(但实际当缩小到3的时候就已经。。。)

3.BMap.Map方法创建地图时候需要一个容器(地图会根据容器的大小自动进行调整。),填写相关容器的id。

关于地图大小:

可以通过

复制代码 代码如下:

map.setZoom();

方法主动控制地图大小级别。

也可以通过设置

复制代码 代码如下:

map.enableScrollWheelZoom(true);

利用鼠标滚轮控制大小。

百度地图提供了非常丰富的功能空间共我们使用。

1.Control:控件的抽象基类,所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。

2.NavigationControl:地图平移缩放控件,PC端默认位于地图左上方,它包含控制地图的平移和缩放的功能。移动端提供缩放控件,默认位于地图右下方。

3.OverviewMapControl:缩略地图控件,默认位于地图右下方,是一个可折叠的缩略地图。

Red Panda AI
Red Panda AI

AI文本生成图像

下载

4.ScaleControl:比例尺控件,默认位于地图左下方,显示地图的比例关系。

5.MapTypeControl:地图类型控件,默认位于地图右上方(地图,卫星,三维)。

6.CopyrightControl:版权控件,默认位于地图左下方。

7.GeolocationControl:定位控件,针对移动端开发,默认位于地图左下方。

效果图

 

复制代码 代码如下:

map.addControl(new BMap.NavigationControl());//缩放平移控件
map.addControl(new BMap.ScaleControl());    //比例尺
map.addControl(new BMap.OverviewMapControl());//缩略图
map.addControl(new BMap.MapTypeControl()); //地图类型
map.setCurrentCity("青岛");

注意:当设置城市信息时,MapTypeControl的切换功能才能可用


地图事件:
百度地图API中的大部分对象都含有addEventListener方法,我们可以通过该方法来监听对象事件。
实例:

复制代码 代码如下:

map.addEventListener("click", function(){   
 alert("您点击了地图。");   
});

当我们不再希望监听事件时,可以将事件监听进行移除。每个API对象提供了removeEventListener用来移除事件监听函数。

复制代码 代码如下:

map.removeEventListener("click", functionA);
map.addEventListener("click", functionA);

地图遮盖物:

Overlay:覆盖物的抽象基类,所有的覆盖物均继承此类的方法。

Marker:标注表示地图上的点,可自定义标注的图标。

Label:表示地图上的文本标注,您可以自定义标注的文本内容。

Polyline:表示地图上的折线。

Polygon:表示地图上的多边形。多边形类似于闭合的折线,另外您也可以为其添加填充颜色。

Circle: 表示地图上的圆。

InfoWindow:信息窗口也是一种特殊的覆盖物,它可以展示更为丰富的文字和多媒体信息。注意:同一时刻只能有一个信息窗口在地图上打开。

标注示例:

var point = new BMap.Point(120.389472,36.072362);//默认 可以通过Icon类来指定自定义图标
 var marker = new BMap.Marker(point);
 var label = new BMap.Label("青岛市政府",{offset:new BMap.Size(20,-10)});//标注标签 
 marker.setLabel(label)//设置标注说明
 marker.enableDragging();//标注可以拖动的
 marker.addEventListener("dragend", function(e){ 
  alert(e.point.lng + ", " + e.point.lat);//打印拖动结束坐标 
 }); 
 map.addOverlay(marker); 
 var point = new BMap.Point(120.387244,36.064835);
 var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25));
 var marker2 = new BMap.Marker(point, {icon: myIcon}); 
 map.addOverlay(marker2);
 var infoWindow = new BMap.InfoWindow("

详细信息

"); //弹出窗口 marker2.addEventListener("click", function(){ this.openInfoWindow(infoWindow); });

以上说明就是本文的全部内容,希望对大家使用百度地图api有所帮助。

相关文章

百度地图
百度地图

百度地图作为新一代人工智能地图,服务覆盖全球200+城市及国家。导航可信赖、语音交互更简单、数据丰富更贴心的百度地图,致力于为用户提供更准确、更丰富、更易用的出行服务。有需要的小伙伴快来保存下载体验吧!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

0

2025.12.31

php网站源码教程大全
php网站源码教程大全

本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

0

2025.12.31

视频文件格式
视频文件格式

本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

2

2025.12.31

不受国内限制的浏览器大全
不受国内限制的浏览器大全

想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

6

2025.12.31

出现404解决方法大全
出现404解决方法大全

本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

18

2025.12.31

html5怎么播放视频
html5怎么播放视频

想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

3

2025.12.31

关闭win10系统自动更新教程大全
关闭win10系统自动更新教程大全

本专题整合了关闭win10系统自动更新教程大全,阅读专题下面的文章了解更多详细内容。

2

2025.12.31

阻止电脑自动安装软件教程
阻止电脑自动安装软件教程

本专题整合了阻止电脑自动安装软件教程,阅读专题下面的文章了解更多详细教程。

1

2025.12.31

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

2

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Git版本控制工具
Git版本控制工具

共8课时 | 1.5万人学习

Google地图中文API手册
Google地图中文API手册

共9课时 | 5.3万人学习

百度地图开发文档
百度地图开发文档

共15课时 | 9.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号