提供一个可以打开天地图api并正确显示的代码
时间: 2024-09-19 21:10:22 浏览: 22
当然,这里是一个简单的JavaScript示例,展示了如何使用天地图API创建一个地图并定位到北京市:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>天地图API演示</title>
<script src="https://webapi.amap.com/maps?v=1.4.14&key=YOUR_API_KEY"></script> <!-- 替换为您的实际API Key -->
</head>
<body>
<div id="map" style="width: 100%; height: 400px;"></div>
<script>
function initMap() {
// 初始化地图
var map = new AMap.Map('map', {
zoom: 13, // 显示缩放级别
center: [116.404, 39.915], // 北京坐标,经度,纬度
disableDefaultUI: true, // 禁用默认控件
});
// 加载地图服务
AMap.services.load(['AMap.Geocoder'], function() {
var point = new AMap.LngLat(116.404, 39.915); // 搜索的经纬度
AMap.geocode({
location: point,
resultPanel: 'r panel', // 结果面板
}).then(function(result) {
if (result.info.status === '1') {
// 将结果显示出来
var marker = new AMap.Marker({
position: result.regeocode.formattedAddress, // 地址
map: map,
});
} else {
alert('抱歉,无法找到该地!');
}
});
});
}
initMap(); // 页面加载完成后立即初始化地图
</script>
</body>
</html>
```
在这个例子中,你需要将`YOUR_API_KEY`替换为从天地图官网获取的实际API Key。这个代码会在页面上创建一个地图,并尝试查找并标记出北京市的位置。