使地图以地图上的点为中心

，可以通过设置地图的中心点坐标和缩放级别来实现。

在前端开发中，我们可以使用各种地图API来实现该功能。以腾讯地图为例，可以使用腾讯地图JavaScript API进行开发。具体的实现步骤如下：

在HTML页面中引入腾讯地图的JavaScript API：

<script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_API_KEY"></script>

其中，YOUR_API_KEY为你在腾讯地图开放平台申请的API密钥。

创建一个地图容器，指定一个固定的宽度和高度：

<div id="map" style="width: 800px; height: 600px;"></div>

在JavaScript代码中初始化地图，并设置中心点坐标和缩放级别：

var map = new qq.maps.Map(document.getElementById("map"), {
    center: new qq.maps.LatLng(39.916527, 116.397128), // 中心点坐标
    zoom: 12, // 缩放级别
});

其中，qq.maps.LatLng用来表示一个地理坐标点，可以根据需要设置不同的中心点坐标。

通过以上步骤，地图就会在指定的地图容器中显示，并以设置的中心点为中心进行展示。用户可以通过操作地图进行缩放和拖动，以查看更多或更少的地图细节。

这种功能在很多应用场景中都会使用到，比如地图导航、地理位置标注、地理信息展示等。腾讯云提供的相关产品包括腾讯位置服务（https://cloud.tencent.com/product/tianditu）和腾讯地图开放平台（https://lbs.qq.com/），开发者可以根据实际需求选择合适的产品进行开发和集成。