调用百度地图API获取经纬度(详细步骤)
js调用百度地图API获取经纬度
·
前端调用百度地图API获取经纬度(详细操作)
1. 浏览器搜索百度地图开放平台
2. 创建应用
点击控制台 --> 应用管理 --> 我的应用 --> 注册账号(如果没有注册过) --> 创建应用
填写应用名称 --> 应用类型选择浏览器端 --> Referer白名单填 * --> 点击提交
回到我的应用 --> 复制访问应用（AK）
3. 使用API获取经纬度
这里使用的是百度地图v1.0
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地图</title>
<style type="text/css">
html{
height:100%
}
body{
height:100%;
margin:0px;
padding:0px
}
#container{
width: 800px;
height: 600px;
}
/* 去掉版权显示 */
.BMap_cpyCtrl {
display:none;
}
.anchorBL{
display:none;
}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=刚刚复制的AK">
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
// 创建地图实例
let map = new BMapGL.Map("container");
// 创建点坐标
let point = new BMapGL.Point(116.39515671900338, 39.93181962772638);
map.centerAndZoom(point, 15);
//启用滚轮放大缩小，默认禁用。
map.enableScrollWheelZoom(true);
// 添加比例尺控件
let scaleCtrl = new BMapGL.ScaleControl();
let zoomCtrl = new BMapGL.ZoomControl();
map.addControl(scaleCtrl);
map.addControl(zoomCtrl);
// 添加城市列表控件
let cityCtrl = new BMapGL.CityListControl();
map.addControl(cityCtrl);
// 添加标记点
let marker = new BMapGL.Marker(point);
map.addOverlay(marker);
//地图单击事件
map.addEventListener("click", function(e){
// 清除覆盖物
map.clearOverlays();
// 重设标记点
let point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
let marker = new BMapGL.Marker(point);
map.addOverlay(marker);
//信息窗口配置
let opts = {
width: 250, // 宽度
height: 100, // 高度
title:'经纬度信息' //标题
}
let info = `当前位置经度为${e.latlng.lng}，纬度为${e.latlng.lat}`
// 创建信息窗口对象
let infoWindow = new BMapGL.InfoWindow(info, opts);
// 打开信息窗口
map.openInfoWindow(infoWindow, point);
});
</script>
</body>
</html>
4. 实现效果
5.其他功能
如果想实现其他功能，可自行阅读开发文档，注意版本之间的区别
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)