百度地图使用(二)

百度地图使用(二)

1. 百度地图API-覆盖物

//创建容器
var map = new BMapGL.Map('allmap');
var point = new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
// 创建点覆盖物
var marker = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915));
//添加覆盖物
map.addOverlay(marker);
//删除具体覆盖物
map.removeOverlays(marker);
//删除所有覆盖物
map.clearOverlays();

2.点覆盖物

var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(116.404, 39.928), 15);
map.enableScrollWheelZoom(true);
// 创建点标记
var marker1 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.925));
var marker2 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915),{
    enableDragging: true
});
// 在地图上添加点标记
map.addOverlay(marker1);
map.addOverlay(marker2);

注：更改标注图标

var map = new BMapGL.Map('container');
var point = new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
// 创建小车图标
var myIcon = new BMapGL.Icon("/jsdemo/img/car.png", new BMap.Size(52, 26));
// 创建Marker标注，使用小车图标
var pt = new BMapGL.Point(116.417, 39.909);
var marker = new BMapGL.Marker(pt, {
    icon: myIcon
});
// 将标注添加到地图
map.addOverlay(marker);

注：添加点击事件

var map = new BMapGL.Map('container');
var point = new BMapGL.Point(116.404, 39.925);
map.centerAndZoom(point, 15);
// 创建点标记
var marker = new BMapGL.Marker(point);
map.addOverlay(marker);
// 创建信息窗口
var opts = {
    width: 200,
    height: 100,
    title: '故宫博物院'
};
var infoWindow = new BMapGL.InfoWindow('地址：北京市东城区王府井大街88号乐天银泰百货八层', opts);
// 点标记添加点击事件
marker.addEventListener('click', function () {
    map.openInfoWindow(infoWindow, point); // 开启信息窗口
});

实现效果如下图所示：

如果想研究更加详细的点覆盖物的小伙伴可以自行查看研究，奉上链接 点覆盖物