百度地图创建一个含有经纬度和一个数字变量的结构体并在地图中显示这些点
时间: 2024-05-12 09:14:41 浏览: 80
使用百度地图获取经纬度和地址信息
5星 · 资源好评率100%
在使用百度地图API之前,你需要先到百度地图开放平台注册账号并申请API Key,具体步骤可以参考官方文档。
接下来,我们可以按照以下步骤创建一个包含经纬度和数字变量的结构体并在地图中显示这些点:
1. 定义结构体类型,包含经纬度和数字变量:
```c++
struct Point {
double lng; // 经度
double lat; // 纬度
int num; // 数字变量
};
```
2. 创建一个 `vector` 存储多个点的信息:
```c++
vector<Point> points = {
{116.404, 39.915, 100},
{116.407, 39.920, 50},
{116.412, 39.912, 80},
{116.415, 39.910, 120},
{116.419, 39.902, 70}
};
```
3. 在 HTML 页面中引入百度地图API:
```html
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的API Key"></script>
```
4. 创建地图容器:
```html
<div id="map" style="width: 100%; height: 500px;"></div>
```
5. 在 JavaScript 中初始化地图,并添加标注:
```javascript
// 初始化地图
var map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
// 添加标注
for (var i = 0; i < points.length; i++) {
var point = new BMap.Point(points[i].lng, points[i].lat);
var marker = new BMap.Marker(point);
var label = new BMap.Label(points[i].num.toString(), {offset: new BMap.Size(20,-10)});
marker.setLabel(label);
map.addOverlay(marker);
}
```
完整的 HTML 页面代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度地图示例</title>
<style type="text/css">
#map {height: 500px; width: 100%;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的API Key"></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// 定义结构体类型
struct Point {
double lng; // 经度
double lat; // 纬度
int num; // 数字变量
};
// 创建点集合
vector<Point> points = {
{116.404, 39.915, 100},
{116.407, 39.920, 50},
{116.412, 39.912, 80},
{116.415, 39.910, 120},
{116.419, 39.902, 70}
};
// 初始化地图
var map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
// 添加标注
for (var i = 0; i < points.length; i++) {
var point = new BMap.Point(points[i].lng, points[i].lat);
var marker = new BMap.Marker(point);
var label = new BMap.Label(points[i].num.toString(), {offset: new BMap.Size(20,-10)});
marker.setLabel(label);
map.addOverlay(marker);
}
</script>
</body>
</html>
```
注意,以上代码中的 `API Key` 需要替换成你自己的百度地图API Key。
阅读全文