玩转百度地图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 ...
随机推荐
- Nacos配置中心使用
在系统开发过程中,开发者通常会将一些需要变更的参数.变量等从代码中分离出来独立管理,以独立的配置文件的形式存在.目的是让静态的系统工件或者交付物(如 WAR,JAR 包等)更好地和实际的物理运行环境进 ...
- 学会Git玩转GitHub(第二篇) 入门详解 - 精简归纳
学会Git玩转GitHub(第二篇) 入门详解 - 精简归纳 JERRY_Z. ~ 2020 / 10 / 25 转载请注明出处!️ 目录 学会Git玩转GitHub(第二篇) 入门详解 - 精简归纳 ...
- jumpserver部署使用
一.简介 前面我们聊到了openvpn的部署和使用,它能够实现从互联网通过openvpn连接到公司内网服务器,从而进行远程管理:但openvpn有一个缺点它不能记录哪些用户在内网服务器上操作了什么,拥 ...
- promise解决微信小程序中的request回调地狱
//使用 request(url,methods ,data).then(res => { //服务器返回数据 console.log(res ); return request(url,met ...
- javascript中的描述对象（Descriptor）
对象的每个属性都有一个描述对象(Descriptor),用来控制该属性的行为.Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象. 获取对象中属性描述对象 Ob ...
- 前后端分离Java后端主流开发环境框架20200622
开发环境: IDE:IntelliJ IDEA 2017+ DB: mysql5.7.4.PostgreSQL.mongoDB.redis JDK:JDK1.8+ Maven:Maven 3.2.3+ ...
- 【Flutter 混合开发】添加 Flutter 到 Android Activity
Flutter 混合开发系列 包含如下: 嵌入原生View-Android 嵌入原生View-iOS 与原生通信-MethodChannel 与原生通信-BasicMessageChannel 与原生 ...
- Linux 系统基于 Hadoop 安装 Hive
[注意]安装hive前提是要先安装hadoop集群,并且hive只需要在hadoop的namenode节点集群里安装即可(在所有的namenode上安装),可以不在datanode节点的机器上安装. ...
- nb-iot技术实现跟踪功能的应用
在互联网和连接的世界里,nb-iot风靡一时.企业和个人正在利用nb-iot技术和nb-iot设备的可靠,快速连接能力,对其技术系统进行渐进式更改,并创建一个互联的"智能"世界. ...
- PHP百度地图开发之距离计算的实例分享
/** * 计算两个坐标之间的距离(米) * @param float $fP1Lat 起点(纬度) * @param float $fP1Lon 起点(经度) * @param float $fP2 ...