低代码平台-宜搭如何调用高德平台API地图

三枳科技

于 2022-04-13 16:58:19 发布

阅读量1.8k

点赞数 5

分类专栏：低代码文章标签： javascript

本文链接：https://blog.csdn.net/qq_43407325/article/details/124152227

版权

低代码专栏收录该内容

5 篇文章 0 订阅

订阅专栏

高德地图API作为第三方API在宜搭中不能直接调用，需要使用引用语句引入第三方JSAPI

简单的来说我们在引入第三方API后，需要在页面加载动作中去调用此方法，然后展示到HTML组件中.

调用详情见JS代码：

export function didMount() {
 
  
   
  this.loadAssets();
   
   

  
}
export function loadScript(src, callback) {
  if (!src) {
    return;
  }
  const node = document.createElement('script');
  node.crossOrigin = 'crossOrigin';
  node.src = src;
  node.addEventListener('load', callback, false);
  document.head.appendChild(node);
}

export function loadAssets() {
  this.loadScript('https://webapi.amap.com/loader.js', () => {
    // your code 
    AMapLoader.load({ //首次调用 load
      key: 'xxxxxxx',//首次load key为必填
      version: '2.0',
      plugins: ['AMap.Scale', 'AMap.ToolBar']
    }).then((AMap) => {
     var map = new AMap.Map('container');
      map.addControl(new AMap.Scale())
      map.addControl(new AMap.ToolBar())
      map.add(new AMap.Marker({
        position: map.getCenter()
      }));
    }).catch((e) => {
      console.error(e);
    });
  });
}

HTML代码：

<html lang="en">

<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>AMap JSAPI Loader</title>
	<style type="text/css">
		body,
		html,
		#container {
			width: 100%;
			height: 500px;
			margin: 0px
		}
	</style>
</head>
<body>
<div id="container" tabindex="0">
	
</div>
</body>
	</html>

最后请大家查看展示效果：