浏览器端-百度地图JavaScript版

最新推荐文章于 2024-09-25 14:00:00 发布

@小虎同志

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量74

点赞数 1

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/qq_72239654/article/details/134275626

版权

接入指引

我们使用我们的百度地图的时候需要导入两个meta标签官网是这么说的，我也不太清楚

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%;}

我们导入一下需要的东西

这个是我们百度地图提供的在线版本js，其中'您的ak'我们需要进行填写，这个东西我们去控制台可以申请

可以直接ctrl + c 复制

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

</script>

我们首先要创建一个存放地图的容器就是我们的div，id='container'。

<body>
    <div id="container"></div>
</body>

创建成功后，我们就可以开始我们的工程了

1、创建百度地图进行初始化

 var map = new BMapGL.Map("container"); // 选中container这个容器告诉它我们要对这个容器进行初始化
 var point = new BMapGL.Point(112.938904, 28.228258); // 设置地图的默认打开位置（经纬度）
    map.centerAndZoom(point, 15); // 设置居中与缩放
    map.enableScrollWheelZoom(true) // 启用滚轮放大缩小功能
    map.setDefaultCursor('pointer'); // 设置地图悬浮选中形态为手型

2、绑定地图的单击事件

我们刚开始创建的map就是我们的地图对象

map.addEventListener('click',e=>{ // 绑定一个click事件，传入的参数被e接收
    // 这里面传入的有经纬度，我这里就不一个个的去讲解了
    console.log(e.latlng); // 打印经纬度信息 {lat:'',lng:''}
});

3、自定义标记点

我们一般地图用在选择地点的时候，那么我们的地图肯定少不了指针点

map.addEventListener('click',e=>{
    // 获取经纬度
       let latAndLng = e.latlng; // 获取经纬度重置标记点
    
	// 创建标记点
    var icon = new BMapGL.Icon('图片地址',new BMapGL.Size('图片宽度','图片高度'),{anchor:new BMapGL.Size(10,0)})
    
    // 清除一下地图上的覆盖物（比如我们之前点击事件设置好的标记点等等，防止重复导致多个指针）
	map.clearOverlays();
    
    // 标记点要到达的位置
  	var newPoint = new BMapGL.Point(latAndLng.lng, latAndLng.lat);
    
    // 创建标记对象，放到地图上面的标记（拥有指针放置的位置和指针图片）
    var marker = new BMapGL.Marker(newPoint,{icon:icon})
    
     map.addOverlay(marker); // 将marker标记对象放到我们的map地图中
     map.panTo(newPoint); // map.panTo(newPoint) 就是直接锁定到我们的这个newPoint经纬度位置  
})

4、通过经纬度获取到地理位置

var getAddressUtil = new BMapGL.Geocoder(); // 创建地理经纬度解码器

// 将地址解析结果显示在地图上，并调整地图视野
var get = function(lng, lat) { // 传入经纬度
    getAddressUtil.getLocation(new BMapGL.Point(lng, lat), function (res) {
        if (res) {
            console.log(res) // 打印位置信息
        }
    })
}