在MapTalks地图中，可以通过设置Canvas容器的样式和尺寸来加载地图。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>MapTalks 地图在 Canvas 容器中加载</title>
    <style>
        #mapContainer {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
    <script src="https://api.maptalks.com/v2/jsapi.min.js"></script>
    <script>
        function init() {
            var map = new maptalks.Map("mapContainer", {
                center: [116.397428, 39.90923], // 设置地图中心点坐标
                zoom: 10, // 设置地图初始缩放级别
                layers: [
                    new maptalks.layer.Tiled({
                        url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    })
                ]
            });
        }
    </script>
</head>
<body onload="init()">
    <div id="mapContainer"></div>
</body>
</html>

在这个示例中，我们创建了一个名为`mapContainer`的`div`元素作为Canvas容器，并设置了其宽度、高度和位置。然后，我们在`<script>`标签中编写了初始化地图的代码，将地图的中心点坐标设置为北京市的经纬度，初始缩放级别设置为10，并添加了一个OpenStreetMap图层。最后，在`<body>`标签的`onload`事件中调用了`init()`函数，确保在页面加载完成后初始化地图。

<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>地图 - 在Canvas容器中加载</title>
  <style type="text/css">
    html,body{margin:0px;height:100%;width:100%}
  </style>
  <link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
  <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
  <body>
    <canvas width=600 height=300 id="map" style="border:1px solid"></canvas>
    <script>
      var res = (window.devicePixelRatio || (window.screen.deviceXDPI / window.screen.logicalXDPI)) > 1;
      if (res) {
        // retina, see https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
        var canvas = document.getElementById('map');
        var r = 2;
        canvas.width *= r;
        canvas.height *= r;
        canvas.style.cssText += 'width:' + Math.round(canvas.width / r) + 'px;height:' + Math.round(canvas.height / r) + 'px';
      }
      var map = new maptalks.Map('map', {
        center: [-0.113049,51.498568],
        zoom: 14,
        zoomControl : true, // ignored in a canvas container
        scaleControl : true, // ignored in a canvas container
        baseLayer: new maptalks.TileLayer('base', {
          urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
          subdomains: ['a','b','c','d'],
          attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
        })
      });
    </script>
  </body>
</html>

此处为隐藏内容，请评论后查看隐藏内容，谢谢！

 您阅读本篇文章共花了：