在公司项目中,用到了基于百度地图API的开发,下面简单介绍一下:
第一步:在页面中引入js文件,src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"。
第二步:创建实例,进行初始化:
const map = new BMap.Map("container"); // 创建地图实例
map.centerAndZoom("上海",12); // 初始化地图,用城市名设置地图中心点
const point = new BMap.Point(121.48, 31.22); // 创建点坐标
map.centerAndZoom(point, 12); // 初始化地图,设置中心点坐标和地图级别
第三步:创建标注:
const marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker);
第四步:创建Label:
const label = new BMap.Label('这是一个标签!', {
offset: new BMap.Size(15, -25)
});
第五步:为Label设置样式:
label.setStyle({
background: '#ff8355',
border: '1px solid "#ff8355"',
borderRadius: "5px",
color: '#fff',
height: "26px",
lineHeight: "26px",
textAlign: "center",
width: "120px"
});
第六步:为标注添加Label:
marker.setLabel(label); //为标注添加一个标签
效果图如下: