玩转百度地图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 ...
随机推荐
- Helium文档1-WebUI自动化-环境准备与入门
前言 Helium 是一款 Web 端自动化开源框架,全称是:Selenium-Python-Helium,从名字上就可以看出,Helium 似乎和 Selenium 息息相关,基于Selenium的 ...
- Linux配置阿里epl源
去阿里云 有源仓库 阿里云镜像官方站点 https://developer.aliyun.com/mirror/ 先备份本机上的源 mv /etc/yum.repos.d/CentOS-Base.re ...
- 阿里技术专家十五问，真题面试刀刀见肉，快来和阿里面试官battle
引言 2020阿里巴巴专家组出题,等你来答: 题目:如何判断两个链表是否相交 出题人:阿里巴巴新零售技术质量部 参考答案: $O(n^2)$: 两层遍历,总能发现是否相交 $O(n)$: 一层遍历,遍 ...
- JS实现将二维数组生成到页面上
前言 之前没说过数组,现在来写一下数组 CSS span { border:2px solid skyblue; width:30px; height: 30px; display: inline-b ...
- 微信小程序分类的实现
微信小程序的分类功能思路 实现思路 1.把屏幕当成一个固定的盒子,然后把盒子分成两边,并让盒子的每一边都能够滚动. 2.通过将左侧边栏元素的id和右边内容的categoryId进行匹配,渲染展示相同i ...
- docker 启动容器restart 策略
docker 运行容器时使用--restart 参数可以指定一个restart策略,来指定容器应该如何重启,或不应该重启,当容器启用restart策略时,将会载docker ps 显示up 或者res ...
- 八皇后C++版本
emmmm~刚刚学C++,写一个八皇后,凑合看吧嘤嘤嘤 1 #include <iostream> 2 #include<cstdlib> 3 #include<cmat ...
- rsync 守护进程模式搭建 与常见报错
守护进程模式搭建 1.环境准备 2.安装rsync(做备份的服务器都安装) [root@backup ~]# yum install -y rsync 3.服务端配置 [root@backup ~]# ...
- APP后台架构20191205
1.架构,架构与业务紧密相关,是有业务驱动的. 2.APP后台演进原则. App后台的架构是由业务规模驱动而演进的,App后台是为业务服务的,App后台的价值在于能为业务提供其所需要的功能,不应过度设 ...
- Google Cayley图数据库使用方法
最近在用Golang做流程引擎,对于流程图的存储,我看到了Google的Cayley图数据库,感觉它可能会比较适合我的应用,于是便拿来用了用. 项目地址在这里:https://github.com/g ...