第一步：申请百度地图账号
百度地图aip开发地址： lbsyun.baidu.com/index.php?t…
- 我们可以通过百度地图账号申请百度地图api的免费使用的密钥。 如下截图步骤：
第二步开发基础的地图
百度地图显示的大小是我们通过css控制的
如下代码是开发最基本的地图代码:
<!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>Hello, World</title>
<style type="text/css">
html{width:800px}
body{height:800px;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的密钥">
</script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new BMapGL.Map("container");
// 创建地图实例 ,经度和维度，您需要展示的地方的经度和维度就写在这里
var point = new BMapGL.Point(116.367548,39.908119);
// 创建点坐标
map.centerAndZoom(point, 15);
</script>
</body>
</html>
第三步创建一个带有目的地图标的地图
代码是上边和下边合并一起使用的。
如下代码的意思是在某个坐标点，创建一个红色的图标：
//这行代码是目的地会用红色的默认图标标出来
var marker = new BMapGL.Marker(point); // 创建标注
map.addOverlay(marker);
第四步：使用一张图片来替代默认的图标
在使用一张图片来替代默认的图标时，需要把第三步的那行代码删除掉。否则可能会出现图标混乱，就是会有多个图标错位。
如下代码：
//在目的地添加图片：
var myIcon = new BMapGL.Icon("mapicon.png", new BMapGL.Size(116.367548, 39.908119), {
// 指定定位位置。
// 当标注显示在地图上时，其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
anchor: new BMapGL.Size(10, 25),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
// 需要指定大图的偏移位置，此做法与css sprites技术类似。
imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移
});
// 创建标注对象并添加到地图
var marker = new BMapGL.Marker(point, {icon: myIcon});
map.addOverlay(marker);
第五步，监听点击图标的事件
marker.addEventListener("click", function(){
alert("您点击了标注");
});
