携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情
目录
一、登录账号以及获取秘钥
获取秘钥
编辑
编辑
提交之后会出现一个新增的AK也就是所谓的秘钥
编辑
这时候就可以直接用来调用了
二、引入地图
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的秘钥">
三、创建地图容器
之后创建一个盒子
<div id="container"></div>
四、定义盒子大小
设置盒子大小以及隐藏logo和版权
#container {
margin: 100px auto;
width: 500px;
height: 300px
}
/* 百度地图版权 */
.BMap_cpyCtrl {
display: none;
}
/* 百度地图logo */
.anchorBL {
/* display: none; */
}
五、设置地图详细样式
<script type="text/javascript">
var map = new BMapGL.Map("container");
// 允许放大缩小
map.enableScrollWheelZoom(true);
// 创建地图实例
var point = new BMapGL.Point(121.467406, 31.411477, 20);
// 创建标记位置
var marker = new BMapGL.Marker(new BMapGL.Point(121.467406, 31.411477));
// 默认放大倍数
map.centerAndZoom(point, 20);
function addOverlay() {
map.addOverlay(marker); // 增加点
}
addOverlay()
var opts = {
width: 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title: "小朋友专属区", // 信息窗口标题
message: "这里是公寓"
}
var infoWindow = new BMapGL.InfoWindow("地址：上海市xx区xx路xxxxx", opts); // 创建信息窗口对象
marker.addEventListener("click", function () {
map.openInfoWindow(infoWindow, point); //开启信息窗口
});
// 初始化地图，设置中心点坐标和地图级别
var geolocation = new BMapGL.Geolocation();
var geoc = new BMapGL.Geocoder();
console.log(geoc);
</script>
效果如下：
编辑
如果想要自己获取坐标位置可以使用拾取坐标系统
编辑
\
