显示地图
我们从展示一个以大连为中心的地图开始。以下为Demo和示例。
注: 下文代码中使用的token、取图地址以及相关库均为fmap服务器下载，最终解释权归fmap所有，如有疑问请联系相关开发者。
编写HTML页面的基础代码
在这一步我们完成头部文件和地图容器样式的编写，让地图容器充满网页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>地图展示</title>
<!--引入FMap CSS库-->
<link rel="stylesheet" href="https://map.botaisoft.com/js/doc/lib/fmap.css">
<!--引入FMap JS库-->
<script src="https://map.botaisoft.com/js/doc/lib/fmap.js"></script>
<style>
body, html,#map {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
</head>
<body>
<div id="map"></div>
<script>
// 设置地图瓦片层url
var token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJGQU5HaTIyR0VOeUhsTTJCZ211bEhpRGhtR2pFYmFLYyIsInVzZXIiOiJndWVzdCJ9.CJ9JuWCxrx4U40K%2FHoBcgqP%2Bgn%2BWqXE9io6eCxi6g9g%3D"
var layer = FMap.tileLayer('http://map.botaisoft.com/apis/v1/rastertiles/mix_map/{z}/{x}/{y}.png?token=' + token);
// 创建地图实例
var map = new FMap.Map('map', {
// 设置中心点坐标
center: new FMap.LatLng(38.92705, 121.6580833),
// 设置地图缩放级别
zoom: 13,
maxZoom: 17,
minZoom: 3,
// 设置地图实例瓦片层
layers: [layer]
});
</script>
</body>
</html>