前言
该文章记录一些百度地图基础知识,慢慢将会添加更多知识,所有内容均从网上整理而来,加上自己的理解做一个整合,方便工作中使用。
坐标拾取器-高德地图-获取经纬度
百度的坐标拾取器不太好用
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.点击事件触发的提示框 效果图