百度地图api 实时将指定经纬度位置显示在地图中间
时间: 2023-12-10 07:42:01 浏览: 120
您可以使用百度地图JavaScript API来实现这一功能。具体步骤如下:
1.在HTML文件中引入百度地图JavaScript API的代码:
```
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
```
其中,`ak`参数为您申请的百度地图API密钥。
2.创建地图容器:
```
<div id="map" style="width: 100%; height: 100%;"></div>
```
3.在JavaScript文件中编写代码,在地图中心显示指定经纬度:
```
// 初始化地图
var map = new BMap.Map("map");
// 创建点坐标
var point = new BMap.Point(经度, 纬度);
// 设置地图中心点
map.centerAndZoom(point, 15);
// 开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
```
其中,`经度`和`纬度`为您要显示的位置的坐标值。
4.将以上代码放在页面加载完成后执行即可。
示例代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图实时显示指定位置</title>
<style type="text/css">
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
font-family: "微软雅黑";
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var map = new BMap.Map("map"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 设置中心点和缩放级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
</script>
</body>
</html>
```
在上面的代码中,将`您的密钥`替换为您申请的百度地图API密钥,`116.404`和`39.915`为北京市中心的经纬度坐标。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)