页面引入百度地图JS并使用API

yyq 2020-01-06 15:56:54

页面引入百度地图JS并使用API

百度开发者能使用的功能还是很多的，包括地图相关的一些接口也各种各样，如果网站请求量一般的话，可以申请个AK用用，记录下页面引入百度地图JS并使用相关API的步骤

NO1：申请百度开发者账号，申请应用AK值这些步骤就略过了，度娘一抓一大把，记录下你的AK值即可

NO2：页面引入JS如下

NO3：初始化百度地图，此处使用默认武汉经纬度来示例：

var map = new BMap.Map('dmap'); //dmap为页面显示地图的元素ID

map.centerAndZoom(new BMap.Point(114.310106, 30.602904), 11); //以默认点为中心，参数值11为缩放级别

</script>

NO4：在地图上创建多个点覆盖物，其他如多边形，线等覆盖物用法参加开发者文档

for(var i=0;i<5;i++){

//创建多个经纬度所在的点并添加标记

var new_point = new BMap.Point(114.310106+i*55, 30.602904+i*45);

var marker = new BMap.Marker(new_point);

map.addOverlay(marker); //添加到地图显示

}

NO5：为标记创建自定义图标

var image = 'zdy.jpg'; //自定义显示图片

var myIcon = new BMap.Icon(image, new BMap.Size(46, 75)); //参数2为视窗大小设置，克自行调整

在NO4中的marker定义类添加参数

var marker = new BMap.Maker(new_point, {offset:new BMap.Size(0, -36), icon: myIcon});//参数offset表示图片偏移量，可自行调整

NO6：设置标记上显示的内容

content = '每个标记显示的内容'；

var label = new BMap.Label(content, {offset: new BMap.Size(35, -10)});

NO4循环体类为maker添加

marker.setLabel(label);

NO7：创建信息窗体（即点击标记时显示的内容）

var opts = {

width: 300, //信息窗口宽度

height: 80, //信息窗口高度

title: '每个标记显示的标题'

}

var infoWindow = new BMap.InfoWindow("可以显示地址信息", opts);

//添加点击弹出窗体显示相应函数

addClickHandle(infoWindow, marker, new_point);

NO8：定义弹出窗体显示函数

function addClickHandle(infoWindow, marker, new_point){

marker.addEventListener('click', function(){

openInfoWindow(infoWindow, new_point);

});

}

NO9：清除地图上所有覆盖物

map.clearOverlays();

NO10：完整循环处理如下：

function buildMarker(){