百度地图api基本用法
本文转载自: https://www.cnblogs.com/yfsmooth/p/4695831.html 作者:yfsmooth 转载请注明该声明。
首先 ,如果想调用百度地图api,你需要获取一个百度地图api的密钥。
申请密钥很简单,在百度地图api的首页就有相关链接,填写相关信息百度就会给你一个密钥了。
接下来,就是引入百度地图的api
关键代码如下:
<script type="text/javascript" src="http://api.map.baidu.com/api?ak=yourkey&v=2.0&services=false"></script>
接下来我们就可以创建一个地图试试看了。(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:缩略地图控件,默认位于地图右下方,是一个可折叠的缩略地图。
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("<p style='font-size:14px;'>详细信息</p>"); //弹出窗口marker2.addEventListener("click", function(){this.openInfoWindow(infoWindow); });
百度地图api基本用法相关推荐
- 【百度地图API】建立全国银行位置查询系统(四)——如何利用百度地图的数据生成自己的标注...
摘要: 上一章留个悬念,"如果自己没有地理坐标的数据库,应该怎样制作银行的分布地图呢?" 答案就是,利用百度地图上的数据. ---------------------------- ...
- IOS开发百度地图API入门到精通-用点生成路线,导航,气泡响应
(转)IOS开发百度地图API入门到精通-用点生成路线,导航,气泡响应 IOS百度地图API开发自定义气泡,点击气泡自动生成路线,以及拖拽 IOS百度地图开发POISearch搜索附近停车场,附近加油 ...
- baidumap api MySQL_百度地图API
本文我将从如何使用地图API(本文以百度为例,谷歌类似)开始,往后的扩展行的内容详见后续文章. 1.打开链接http://developer.baidu.com/map/jshome.htm 这里有很 ...
- c语言api获取百度地图,H5调用百度地图API获取地理位置
//获取当前位置 var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ alert ...
- 百度地图API——多点路径连线问题
本文系作者 chaoCode原创,转载请私信并在文章开头附带作者和原文地址链接. 违者,作者保留追究权利. 前言 本文是对于在项目应用有遇到的多点连线问题,我的一些解决方式,以及对于之前所学习的一些百 ...
- java百度地图插件下载地址_调用百度地图Api实现的查看地图功能的小插件
1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...
- android 调用百度地图规划,Android 调用百度地图API
一.到 百度地图开发平台下载SDK 1.点击自定义下载 2.下载自己想要的功能包我这里选了三个 3.获取密钥 获取密钥之前我们要新建一个应用 填写好相关的信息 二. 新建一个项目工程 1. 把下载好的 ...
- html加载百度地图,百度地图API详解之地图API加载方式
本文将向大家介绍百度地图API的两种不同加载方式:同步加载和异步加载. 同步加载 这是最常见的加载方式,开发者需要在页面的head标签内添加一个script标签,标签的src属性填写为地图API的地址 ...
- 使用Angular8和百度地图api开发《旅游清单》
前言: 本文的目的是通过一步步实现一个旅游清单项目,让大家快速入门Angular8以及百度地图API.我们将收获: Angular8基本用法,架构 使用百度地图API实现自己的地图应用 解决调用百度地 ...
- 【百度地图API】——如何用label制作简易的房产标签
摘要: 最近,API爱好者们纷纷说,自定义marker太复杂了!不仅定义复杂,连所有的dom事件都要自己重新定义.有没有快速简易创建房产标签的方法呢? 答案当然是有的啦~ 我们可以利用label嘛! ...
最新文章
- 然后Denton et al, 2015 搞出了非常NB的改进版本
- Matlab200以内所有质数,Matlab 中求质数表
- 狐狸文│区块链发展的正路
- DB2时间函数 实现 时间加减
- Lua学习笔记(1)
- SpringCloud学习(五)路由网关(zuul)(Finchley版本)
- 阿里云云计算 33 PolarDB的优势 产品架构
- 工业上的数控机床所属计算机应用的什么领域,工业上的数控机床所属的计算机应用领域是______。...
- h5打开小程序的方法 总结
- 数模电路基础知识 —— 4. 常见电路符号说明(二极管)
- 商业模式及其 SubDAO 深入研究
- 英文学术论文写作基础
- 豆瓣上的一条关于泰坦尼克的影评1
- 信号处理学习笔记(一)截止频率Cutoff Frequency
- 乱序整数序列两数之和绝对值最小
- Directx11教程四十六之FBX SDK
- 鹏业安装算量软件V8.0.0 Build 60(及58)升级内容
- jsliang 陪你瞎叨叨 2
- 潜入浅出--通信中的频带利用率,以MASK.MPSK作为例子
- Linux(Ubuntu)同步互联网时间(ntpdate)