<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maptalks 基础地图</title>
<style>
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Arial, sans-serif;
}
#map {
width: 100%;
height: 100%;
}
</style>
<!-- 引入 Maptalks 库 -->
<link href="https://cdn.bootcdn.net/ajax/libs/maptalks/1.4.1/maptalks.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/maptalks/1.4.1/maptalks.min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
// 创建地图实例
const map = new maptalks.Map('map', {
center: [116.46, 39.92], // 中心点坐标 [经度, 纬度]
zoom: 10, // 缩放级别
baseLayer: new maptalks.TileLayer('base', {
// 使用OpenStreetMap作为底图
urlTemplate: 'https://{s}.xxx.com/xxx/{z}/{x}/{y}',
subdomains: ['cdn']
})
});
// 添加一个标记点
const marker = new maptalks.Marker(
[116.46, 39.92], // 标记位置
{
symbol: {
markerType: 'pin',
markerFill: '#ff0000',
markerLineColor: '#fff',
markerLineWidth: 2,
markerWidth: 40,
markerHeight: 40
}
}
).addTo(map);
</script>
</body>
</html>`
