地理围栏（1）----学习百度地图api调用

最新推荐文章于 2024-09-13 17:10:25 发布

洋洋洋123

最新推荐文章于 2024-09-13 17:10:25 发布

阅读量804

点赞数 2

文章标签： java

本文链接：https://blog.youkuaiyun.com/yc18329961585/article/details/108077154

版权

本文介绍如何使用百度地图API进行地图展示与地理围栏功能开发，涵盖地图初始化、坐标拾取及坐标系转换等关键技术点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近准备做地理围栏的相关东西，先简单学地图的使用，选了百度地图。话不多说，直接上代码

源代码

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
	var map = new BMapGL.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	//事件监听，坐标拾取
    map.addEventListener('click', function(e) {
        alert('点击的经纬度：' + e.latlng.lng + ', ' + e.latlng.lat);
        var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
        alert('点的墨卡托坐标：' + mercator[0] + ', ' + mercator[1]);
    });
</script>

注意，这里的ak是您的秘钥，需要在官网注册并申请，申请地址: http://lbsyun.baidu.com/apiconsole/key?application=key#/home.
拿到后，粘贴进去，就可以访问你的地图了，我的坐标中心点设置在西工大

百度地图api调用
当然，也可以进入百度地图官网学习，链接: https://lbs.baidu.com/index.php?title=open/demos.
具体开发指南：http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey.