百度地图基本使用方法

前言

该文章记录一些百度地图基础知识，慢慢将会添加更多知识，所有内容均从网上整理而来，加上自己的理解做一个整合，方便工作中使用。

坐标拾取器-高德地图-获取经纬度

百度的坐标拾取器不太好用

1.百度地图

//1.引入
< script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥">

//2.html部分
< div id="container">< /div> //需要设置宽高

//3.script中设置基础
const map = new BMapGL.Map("container") //创建地图实例
const point = new BMapGL.Point(104.06,30.667) //创建坐标点
map.centerAndZoom(point,18) //初始化地图，设置中心点坐标和地图的级别(就是放大的倍数)
map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放

//4.创建一个地图标注点
const markerOne = new BMapGL.Marker(new BMapGL.Point(104.06,30.667)) //创建标记点
map.addOverlay(markerOne) //在地图上添加标记点

//5.自定义标注点的图标
const myIcon = new BMapGL.Icon(url,new BMapGL.Size(44,44)) //创建一个自定义图标
const markerTwo = new BMapGL.Marker(point,{icon:myIcon}) //创建marker标注，使用自定义图标
map.addOverlay(markerTwo) //在地图上添加标记点

//6.设置一个标注点文字提示窗口
//文字窗口
const opts = {
    position: new BMapGL.Point(104.06,30.667) //指定文本标注所在的位置
    offset: new BMapGL.Size(30,-30) //设置文本偏移量
}
//创建文本标注对象
const label = new BMapGL.Label('兰润家具装饰',opts)
//配置文本标注样式
label.setStyle({
    color:'#333',
    height:'30px',
    fontSize:'16px',
    lineHeight:'30px',
    borderRadius:'5px',
    borderColor:'#ccc',
    padding:'10px 30px'
})
map.addOverlay(label) //在地图上添加标记点

//7.设置一个点击标注点弹出文字提示窗口
const opts2={
    width:200,
    height:50,
    title:"兰润家具"
}//配置信息窗口的宽高和title
const address = new BMapGL.InfoWindow('地址：青羊区八宝街',opts2)
//标记点添加点击事件
markerOne.addEventListener('click',function(){
    map.openInfoWindow(address,point)
})

1.标注点文字提示框 效果图

!

2.点击事件触发的提示框 效果图