1.引用百度地图CDN(在此之前先引入jquery包)
<scripttype="text/javascript"src="https://api.map.baidu.com/apiv=2.0&ak="去官网申请"></script>
2.创建地图
var map;
$(function() {
initMap();
})
//创建和初始化地图函数:
function initMap() {
createMap(); //创建地图
}
//创建地图
function createMap() {
map = new BMap.Map("map", {
mapType: BMAP_SATELLITE_MAP//没有地标的卫星地图
})
var point = new BMap.Point(121.906076, 28.493103);
//图标大小,如果提供的图标与设置的大小不一样,会隐藏超出部分,用css width:inherit;可以控制
const imgUrl="img/circle.png"//添加图标
const myIcon = new BMap.Icon(imgUrl, new BMap.Size(150, 150));
var marker = new BMap.Marker(point,{icon: myIcon}); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
//缩放大小
map.centerAndZoom(point, 9);
map.enableScrollWheelZoom();
map.enableKeyboard();
map.enableDragging();
map.enableDoubleClickZoom()
}
3.使用注意点
(1)//图标大小,如果提供的图标与设置的大小不一样,会隐藏超出部分,用css width:inherit;可以控制
const imgUrl="img/circle.png"//添加图标
const myIcon = new BMap.Icon(imgUrl, new BMap.Size(150, 150));
var marker = new BMap.Marker(point,{icon: myIcon}); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中