2021-07-22 百度地图API的使用
百度地图javaScript API百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。使用展开图如下：如何生成地图？打开百度地图API，在线生成初始化地图。https://www.baidu.com/link?url=j0Y9mEN1C
·
百度地图javaScript API
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。
使用展开图如下：
如何生成地图？
- 打开百度地图API，在线生成初始化地图。
https://www.baidu.com/link?url=j0Y9mEN1Ck9FIRMrhrQy123dQZ0inrhk16eZWnKoHM8fvh9bRPrWR5K4FthT0XZeG1aFzkcFw84ktGyvoEpl5K&wd=&eqid=ce9a3ed5000000140000000560f91a80
通过输入城市：可以获取到当前地图中心点的经纬度；
设置地图级别：展示在html页面中的地图范围大小
设置地图：自定义地图状态以及鼠标触发事件
添加标注：可以根据自己的需求生成地标、线路、等等。
生成代码：点击获取代码后生成代码：
- 新建一个map.html文件，粘贴复制的代码。
此时代码结构如下：
dituContent中放入整个地图，（sysArea）是我新增的代码，不用管他。
其中，注意要引入：
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
这是引用百度地图api的链接还有密码。
做到这一步，页面中即可展示地图，并且初始化地图中心点是静态的，是在生成代码时手动定位的经纬度。
如何添加多个地图标注？
- 首先获取后台的每个位置的经纬度数据
$(function (){
$.ajax({
url: ctx + "lockerapp/locksets/getpoints",
type: "post",
success: function (data) {
let maplist=[];
for(let i=0;i<data.length;i++){
maplist.push(data[i].area.center)
}
console.log(data)
console.log(maplist);
console.log(maplist[0].split(','));
for(let i=0;i<maplist.length;i++){
var x = Number(maplist[i].split(',')[0]);
var y = Number(maplist[i].split(',')[1]);
// var html = '<span>锁具位置：</span>' + data[i].locksetAddress + '<br>' + '<span>锁具状态:</span>' + mapList[i].address + '<br>' + '<span>状态：<span>' + status
var html = '<span>锁具位置：</span>' + data[i].locksetAddress + '<br>'
var points = new BMap.Point(x, y);//创建坐标点
var opts = {
width: 300,
height: 100,
title:'锁具名称：'+data[i].locksetName
}
var infoWindows = new BMap.InfoWindow(html, opts);
console.log(x);
console.log(y);
markerFun(points,infoWindows,icon);
}
}
})
})
我是使用ajax获取后端的传值，此时data数据是一个数组，数组中包含着对象。
首先，用for循环获取后台的锁具位置数据：新建maplist数组，在数组中传入经纬度数组。
其次，使用
var x = Number(maplist[i].split(’,’)[0]);
var y = Number(maplist[i].split(’,’)[1]);
将经纬度数据转化为数字并将其分开存储。
最后，在 var points = new BMap.Point(x, y)中创建循环坐标点。
坐标点如何显示：使用icon显示坐标点：
var icon = new BMap.Icon("/img/pin.png", new BMap.Size(20, 32), {
anchor: new BMap.Size(10, 30)
})
如何添加多个地图标注文字？
for(let i=0;i<maplist.length;i++){
var x = Number(maplist[i].split(',')[0]);
var y = Number(maplist[i].split(',')[1]);
// var html = '<span>锁具位置：</span>' + data[i].locksetAddress + '<br>' + '<span>锁具状态:</span>' + mapList[i].address + '<br>' + '<span>状态：<span>' + status
var html = '<span>锁具位置：</span>' + data[i].locksetAddress + '<br>'
var points = new BMap.Point(x, y);//创建坐标点
var opts = {
width: 300,
height: 100,
title:'锁具名称：'+data[i].locksetName
}
var infoWindows = new BMap.InfoWindow(html, opts);
console.log(x);
console.log(y);
markerFun(points,infoWindows,icon);
}
使用Inforwindow方法。
如何点击单个地标，地图位置中心转移到该位置？
在markerFun方法中调用map.centerAndZoom,重置地图中心。
function markerFun(points,infoWindows, icon) {
var markers = new BMap.Marker(points, { icon: icon,setTop:true });
map.addOverlay(markers);
markers.addEventListener('click', function (event) {
map.openInfoWindow(infoWindows,points);//参数：窗口、点 根据点击的点出现对应的窗口
map.centerAndZoom(points,12);//设定地图的中心点和坐标并将地图显示在地图容器中
})
}
完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
<title>百度地图API自定义地图</title>
<!--引用百度地图API-->
<style type="text/css">
html,body{margin:0;padding:0;}
.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
#dituContent{
position: absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
</head>
<body>
<div style="width:1000px;height:550px;border:#ccc solid 1px;" id="dituContent" th:object="${sysArea}"></div>
</body>
<script th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript">
let ctx = '\/';//[[@{/}]];
var icon = new BMap.Icon("/img/pin.png", new BMap.Size(20, 32), {
anchor: new BMap.Size(10, 30)
})
// var marker = new BMap.Marker(point);
// marker.setTop(true,27000000);
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
}
//创建地图函数：
function createMap(){
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(118.866597,28.975546);//定义一个中心点坐标
map.centerAndZoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中
var geolocation = new BMap.Geolocation();//动态获取中心点定位
geolocation.getCurrentPosition(function(r){
// 这里对状态进行了判断 BMAP_STATUS_SUCCESS就代表检索成功
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
// 定位到当前地点
map.panTo(r.point);
// r里面包括了一些详细的地址信息和经度纬度的值还有这里需要的point属性，里面也含有经度纬度的值，所以直接调用r.point获取到当前位置
console.log(r);
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
window.map = map;//将map变量存储在全局
}
function markerFun(points,infoWindows, icon) {
var markers = new BMap.Marker(points, { icon: icon,setTop:true });
map.addOverlay(markers);
markers.addEventListener('click', function (event) {
map.openInfoWindow(infoWindows,points);//参数：窗口、点 根据点击的点出现对应的窗口
map.centerAndZoom(points,12);//设定地图的中心点和坐标并将地图显示在地图容器中
})
}
//地图事件设置函数：
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}
//地图控件添加函数：
function addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
}
initMap();//创建和初始化地图
//获取坐标
$(function (){
$.ajax({
url: ctx + "lockerapp/locksets/getpoints",
type: "post",
success: function (data) {
let maplist=[];
for(let i=0;i<data.length;i++){
maplist.push(data[i].area.center)
}
console.log(data)
console.log(maplist);
console.log(maplist[0].split(','));
for(let i=0;i<maplist.length;i++){
var x = Number(maplist[i].split(',')[0]);
var y = Number(maplist[i].split(',')[1]);
// var html = '<span>锁具位置：</span>' + data[i].locksetAddress + '<br>' + '<span>锁具状态:</span>' + mapList[i].address + '<br>' + '<span>状态：<span>' + status
var html = '<span>锁具位置：</span>' + data[i].locksetAddress + '<br>'
var points = new BMap.Point(x, y);//创建坐标点
var opts = {
width: 300,
height: 100,
title:'锁具名称：'+data[i].locksetName
}
var infoWindows = new BMap.InfoWindow(html, opts);
console.log(x);
console.log(y);
markerFun(points,infoWindows,icon);
}
}
})
})
</script>
</html>
CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)