玩转百度地图API（地图,坐标,标记,添加控件,2D图,混合图,智能搜索,地址解析器,信息窗口)
1.注册得到appkey
2.直接上代码
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: "微软雅黑";
} p {
margin-left: 5px;
font-size: 14px;
} #container {
height: 100%;
width: 100%;
overflow: hidden;
} #point {
display: none;
} .search {
margin-bottom: 10px;
height: 30px;
margin: 0 auto;
width: 300px;
} .center {
height: 650px;
width: 1200px;
margin: 0 auto;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxxxxxxxxxxxxxx"></script>
<title>BaiduMap</title>
</head> <body>
<header class="search">
<input type="search" name="txtSearch" id="txtSearch">
<button id="btnSearch">搜索</button>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</header>
<div class="center">
<span id="point"></span>
<div id="container"></div>
</div>
<script type="text/javascript">
var btnSearch = document.querySelector('#btnSearch'); function initMap(point) { //默认天安门
point = point || {
lng: 116.403955,
lat: 39.915112
};
//地图
let map = new BMap.Map('container'); //坐标
let poi = new BMap.Point(point.lng, point.lat); //标记
let marker = new BMap.Marker(poi); //带有定位的导航控件
let navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true
}); //定位控件
let geolocationControl = new BMap.GeolocationControl(); // 比例尺控件
let scaleCtrl = new BMap.ScaleControl(); //2D图，混合图
let mapType = new BMap.MapTypeControl({
mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
anchor: BMAP_ANCHOR_TOP_LEFT
});
//默认缩略地图控件
let overView = new BMap.OverviewMapControl(); //右下角，打开
let overViewOpen = new BMap.OverviewMapControl({
isOpen: true,
anchor: BMAP_ANCHOR_BOTTOM_RIGHT
}); //右键菜单
let menu = new BMap.ContextMenu(); //建立一个自动完成的对象
let ac = new BMap.Autocomplete({
"input": "txtSearch",
"location": map
}); //地址解析器
let geoc = new BMap.Geocoder(); //信息窗口
let infoWindow = new BMap.InfoWindow(); //let local = new BMap.LocalSearch(map); // 比例尺控件 BMapGL才支持
// let zoomCtrl = new BMap.ZoomControl(); // 3D控件 BMapGL才支持
// var navi3DCtrl = new BMap.NavigationControl3D(); // 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(poi, 16); //开启鼠标滚轮缩放
map.enableScrollWheelZoom(true); //添加标记
map.addOverlay(marker); //添加带有定位的导航控件
map.addControl(navigationControl); //添加定位控件
map.addControl(geolocationControl); //添加比例尺控件
map.addControl(scaleCtrl); //添加2D图，混合图
map.addControl(mapType); //添加默认缩略地图控件
map.addControl(overView); //添加右下角，打开
map.addControl(overViewOpen); let txtMenuItem = [{
text: '放大一级',
callback: function() {
map.zoomIn();
}
}, {
text: '缩小一级',
callback: function() {
map.zoomOut();
}
}]; for (const item of txtMenuItem) {
menu.addItem(new BMap.MenuItem(item.text, item.callback, 100));
} //添加右键菜单
map.addContextMenu(menu); //添加比例尺控件 BMapGL才支持
// map.addControl(zoomCtrl); //添加3D控件 BMapGL才支持
// map.addControl(navi3DCtrl); //定位成功事件
geolocationControl.addEventListener("locationSuccess", (e) => {
setCenterAndMarker(map, marker, e.point);
}); //地图点击事件
map.addEventListener('click', (e) => {
setCenterAndMarker(map, marker, e.point);
}); //鼠标放在下拉列表上的事件
ac.addEventListener("onhighlight", (e) => { const str = getHighLightContent(e); document.getElementById("searchResultPanel").innerHTML = str;
}); //搜索事件
btnSearch.addEventListener('click', (e) => { var txtSearch = document.getElementById('txtSearch').value; function onSearchComplete() { let pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果 setCenterAndMarker(map, marker, pp);
} //智能搜索
let local = new BMap.LocalSearch(map, {
onSearchComplete: onSearchComplete
}); try {
local.search(txtSearch);
} catch (error) { }
}); //标注点击事件
marker.addEventListener('click', (e) => { geoc.getLocation(e.point, function(res) { var addComp = res.addressComponents; const sContent = `<h4 style='margin:0 0 5px 0;'>${res.address}</h4>
<p>城市:${addComp.city}</p>
<p>市区:${addComp.district}</p>
<p>街道:${addComp.street}</p>
<p>街道号:${addComp.streetNumber}</p>
<p>坐标:${Object.values(res.point).toString()}</p>`; infoWindow.setContent(sContent); marker.openInfoWindow(infoWindow); infoWindow.redraw();
}); });
} //获取文本内容
function getHighLightContent(e) { let str = ""; let _value = e.fromitem.value; let value = ""; if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
} str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value; value = ""; if (e.toitem.index > -1) { _value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
} str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value; return str;
} //设置中心和标注
function setCenterAndMarker(map, marker, pp) { map.setCenter(pp); //设置中心坐标 map.clearOverlays(); //移除原有的标注 marker.setPosition(pp); //设置坐标 map.addOverlay(marker); //添加标注
} initMap();
</script>
</body> </html>
玩转百度地图API（地图,坐标,标记,添加控件,2D图,混合图,智能搜索,地址解析器,信息窗口)的更多相关文章
- 百度地图API 地图圈区域并计算坐标点是否在区域内
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【百度地图API】建立全国银行位置查询系统（二）——怎样为地图添加控件
原文:[百度地图API]建立全国银行位置查询系统(二)--怎样为地图添加控件 <摘要>你将在第二章中学会以下知识: 使用手写代码的利器——notepad++: 如何为地图添加控件——鱼骨. ...
- 百度地图API，展示地图和添加控件
1.申请百度账号和AK 点我申请 2.准备页面 根据HTML标准,每一份HTML文档都应该声明正确的文档类型,我们建议您使用最新的符合HTML5规范的文档声明: <!DOCTYPE html&g ...
- android 3.0+百度地图api地图如何移动到指定的经纬度处
由于百度地图api,2.0+和3.0+的改动比较大,api基本上被全换过了,有些同学可能2.0+的api使用的非常熟悉,但是更新到3.0+时,却会遇到一些小麻烦(由于api变了,你就需要重新学习它的a ...
- 【高德地图API】如何获得行政区域？如何制作行政规划图？
原文:[高德地图API]如何获得行政区域?如何制作行政规划图? 什么是行政规划图?如何获得每个行政区域的边界轮廓图?举例:重庆市 江北区.如图: 官方类参考:http://developer.amap ...
- 百度地图API 海量点 自定义添加信息
<!--添加百度地图--> <script type="text/javascript" src="http://api.map.baidu.com/a ...
- 腾讯地图api接收坐标提交坐标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 百度地图API 循环向 marker 添加 click事件
使用百度地图API,循环向marker添加InfoWindow时,所有的marker点击弹出的inforwindow为最后一个添加的infowindow,百度后,使用js闭包解决此问题,直接贴代码: ...
- 安卓开发笔记①：利用高德地图API进行定位、开发电子围栏、天气预报、轨迹记录、搜索周边（位置）
高德地图开发时需要导入的包在下面的网盘链接中:(由于高德地图api更新得太快,官网上最新的包使用起来没有之前的方便,所以以下提供最全面的原始包) 链接:http://pan.baidu.com/s/1 ...
随机推荐
- elasticsearch mysql配置
1,开启bin-log 2,binglog_foramt格式必须为row 3,配置server_id为1001 4,binlog-row-image 必须为full log-bin=mysql-bin ...
- 强网杯web之假的反序列化漏洞
说明 打强网杯的时候一直在写论文, 做林逸师傅的培训题目. 现在得空,还是看了一部分的题目和wp. 源码 源码一共三部分, 这里只写下我知识盲区的一部分,作为自己的记录. <?php highl ...
- Redis学习笔记（四）——数据结构之List
一.介绍 Redis列表(List)是简单的字符串列表,按照插入顺序排序.你可以添加一个元素到列表的头部(left)或者尾部(right),一个列表最多可以包含232-1个元素(4294967295, ...
- 11 Servlet_03 关键字总结 资源跳转：重定项 键值对 继承类 do-get do-post Request域 Context域 =空针解决方法
知识点总结: 1.java里的关键字: byte short int long 数据类型 (正整数)char 数据类型(单字符型)boolesn ture false 布尔类型float dou ...
- ## 【分布式事务】面试官问我：MySQL中的XA事务崩溃了如何恢复？？
写在前面 前段时间搭建了一套MySQL分布式数据库集群,数据库节点有12个,用来测试各种分布式事务方案的性能和优缺点.测试MySQL XA事务时,正当测试脚本向数据库中批量插入数据时,强制服务器断电! ...
- NB-IOT覆盖范围有多大 NB-IOT的强覆盖是怎么实现的
NB-IoT技术自出现以来就以其强大的覆盖范围和通讯距离长而受到广泛的欢迎,发展到现在已经成为万物互联网络中的一个重要分支.那么NB-IoT覆盖范围到底有多大,是怎么来衡量其覆盖能力? 强大的覆盖范围 ...
- 利用VS2017制作软件安装包与卸载程序
本博客讲述如何利用VS2017制作安装包以及相应的卸载程序,并解决过程中可能遇到的问题 一.制作安装程序 1.打开VS2017,新建项目,选择如下图所示程序: 新建成功后,会出现如下图所示目录: 2. ...
- MeterSphere开发者手册
什么是 MeterSphere MeterSphere 是一站式的开源企业级持续测试平台, 涵盖测试跟踪.接口测试.性能测试. 团队协作等功能,兼容 JMeter 等开源标准,有效助力开发和测试团队充 ...
- Python列表排序方法汇总，超详细！
1. 修改原列表,不创建新列表的排序 1 a = [3, 2, 8, 4, 6] 2 print(id(a)) # 2180873605704 3 a.sort() # 默认升序 4 print(a) ...
- 利用 Docker 构建一个简单的 java 开发编译环境
目前 Java 语言的版本很多,除了常用的 Java 8,有一些遗留项目可能使用了 Java 7,也可能有一些比较新的的项目使用了 Java 10 以上的版本.如果想切换自己本地的 Java 开发环境 ...