滴图出行技术开放平台

Appearance

展示地图 ​

本文介绍如何使用 JS API 创建一个地图，开发者可以根据需要设置地图样式。

实现步骤 ​

准备 ​

ℹ️ 提示： 为了正常调用 API ，请先申请 web 平台（JS API）的 key 和安全密钥，点击 具体操作。

HTML 页面准备 ​

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>HELLO, DiMap!</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>
ℹ️ 提示： 如果是移动端开发，请在 head 标签内添加 meta 标签并设置name属性为"viewport"，以达到最佳的绘制性能。 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

加载 JS API ​

可以使用 JS API Loader 来加载，引入申请的 key 和安全密钥。

为了避免你在开发中遇到有关 key 的问题，请务必正确的使用 key 和安全密钥。点击 具体操作 查看

html
<script src="https://lbs.xiaojukeji.com/api/v2/static/loader.js"></script>
<script>
	window.DiMapLoader.load({
		key: "你申请的key"
	}).then(({ DiMap }) => {
		const map = new DiMap.Map({
			container: "map",
			style: "dimap://styles/normal"
		})
		map.on("complete", () => {
			console.log("地图加载完成")
		})
	})
</script>

地图初始化 ​

地图初始化需要设置基本的地图图层，你可以传入地图中心点经纬度（ center ）和地图初始展示级别（ zoom ）来展示你想要的区域范围。本例展示北京以天安门为中心的11级地图视野。

js
const map = new DiMap.Map({
  contianer: "container",
  zoom: 11, //地图级别
  center: [116.397428, 39.90923], //地图中心点
});
⚠️ 注意： 初始化前需要获得DiMap对象，创建地图实例的代码写在 Loader 的 .then((DiMap)=>{}) 中。