玩转百度地图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 ...
随机推荐
- 【计算几何 05】Pick定理
什么是Pick定理(皮克定理) 来自wiki的介绍: 给定顶点座标均是整点(或正方形格子点)的简单多边形,皮克定理说明了其面积 \(A\)和内部格点数目 \(i\) .边上格点数目 \(b\) 的关系 ...
- [阿里DIN] 深度兴趣网络源码分析 之 整体代码结构
[阿里DIN] 深度兴趣网络源码分析 之 整体代码结构 目录 [阿里DIN] 深度兴趣网络源码分析 之 整体代码结构 0x00 摘要 0x01 文件简介 0x02 总体架构 0x03 总体代码 0x0 ...
- （静默安装）Cent OS 6_5(x86_64)下安装Oracle 11g
Cent OS 6_5(x86_64)下安装Oracle 11g 1 硬件要求 1.1 内存 & swap 物理内存不少于1G 硬盘可以空间不少于5G swap分区空间不少于2G Mini ...
- Redis 入门与 ASP.NET Core 缓存
目录 基础 Redis 库 连接 Redis 能用 redis 干啥 Redis 数据库存储 字符串 订阅发布 RedisValue ASP.NET Core 缓存与分布式缓存 内存中的缓存 ASP. ...
- 彻底理解RSA加密算法
RSA是非常典型的非对称加密算法 它的算法是这样的 加密是我们把明文M转化成密文C 需要用到加密运算 而解密时我们要用解密运算将密文C转化成M 从表达式中 可以看出 e和d使我们需要确定的参数 而N是 ...
- xlrd、xlwt常用命令
# -*- coding: utf-8 -*- import xlrd import xlwt from datetime import date,datetime def read_excel( ...
- STM32入门系列-STM32时钟系统，STM32时钟树
时钟对于单片机来说是非常重要的,它为单片机工作提供一个稳定的机器周期从而使系统能够正常运行.时钟系统犹如人的心脏,一旦有问题整个系统就崩溃.我们知道STM32属于高级单片机,其内部有很多的外设,但不是 ...
- DateTimeFormatter接替SimpleDateFormat
java程序猿经常会碰到的一个问题就是日期格式化.当接收参数中有日期或时间,那么就需要与前端商量好其格式,这边我知道是2种:1.时间戳 2.字符串. 先说一下时间戳,这个形势的参数,Java只需new ...
- P1098 字符串的展开
P1098 字符串的展开 刷新三观的模拟题 题意描述 太长了自己去看吧. 算法分析 模拟题分析你*呀! 写这篇题解的唯一原因是:三目运算符用的好的话,可以让百行大模拟变成30行水题. 代码实现 #in ...
- 使用Apache Hudi + Amazon S3 + Amazon EMR + AWS DMS构建数据湖
1. 引入 数据湖使组织能够在更短的时间内利用多个源的数据,而不同角色用户可以以不同的方式协作和分析数据,从而实现更好.更快的决策.Amazon Simple Storage Service(amaz ...