高德地图加载成功之后回调，增加高德UI组件库，实现拖拽

最新推荐文章于 2024-03-28 11:42:09 发布

牟云飞

最新推荐文章于 2024-03-28 11:42:09 发布

阅读量3.8k

点赞数 1

分类专栏：地图

本文为博主牟云飞原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/myfmyfmyfmyf/article/details/87445813

版权

地图专栏收录该内容

14 篇文章 3 订阅

订阅专栏

高德地图可以在地图加载完成后执行自定义的回调，一种方式是：

 map.on("complete", function(){
       log.success("地图加载完成！");  
    });

链接：https://lbs.amap.com/api/javascript-api/example/map-lifecycle/map-complete

另一种方式是在url上增加callback，如：<script src="http://webapi.amap.com/maps?v=1.4.12&key=输入密钥&callback=_gdMapInit">，其中的_gdMapInit就是自定义的回调函数。

注意：高德组件库（http://webapi.amap.com/ui/1.0/main.js）必须在高德地图http://webapi.amap.com/maps加载完成后，才能够引入。

组件库地址：https://lbs.amap.com/api/amap-ui/demos/amap-ui-pathsimplifier/only-passed

<!doctype html>
<html>
<head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <title>地图显示</title>
    <style>
        html,
        body,
        #container {
          width: 100%;
          height: 100%;
        }
    </style>
	<!-- 加载地图JSAPI脚本 -->
	<script src="http://webapi.amap.com/maps?v=1.4.12&key=输入密钥&callback=_gdMapInit"></script>

</head>
<body>
<div style="width:120px;height:40px;background-color:#ffafa2;" onClick="usePositionPicker()">点击加载高德拖拽选址</div>
<div id="container"></div>
</body>

<script>
	//高德地图回调，在回调中增加高德UI组件
	function _gdMapInit(){

		console.log("----加载高德ui组件--------");

		//增加高德UI组件库用于纠错
		var scriptELe = document.createElement('script') ;
		scriptELe.type ='text/javascript' ;
		var srcVal = 'http://webapi.amap.com/ui/1.0/main.js?v=1.0.11&callback=_gdMapInit';//
		scriptELe.src = srcVal;//
		document.body.appendChild(scriptELe);
		
	}



	//高德拖拽选址
	function usePositionPicker(){
		AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
			var map = new AMap.Map('container', {
				zoom: 16,
				scrollWheel: false,
				center: [116.397428, 39.90923] //初始化地图中心点
			})
			var positionPicker = new PositionPicker({
				mode: 'dragMap',
				map: map
			});

			positionPicker.on('success', function(positionResult) {
				//拖拽选址成功，处理
				console.log("positionResult:",positionResult);
			});
			positionPicker.on('fail', function(positionResult) {
				//失败处理
			});
			positionPicker.start();
            map.panBy(0, 1);

		});
	}
	
</script>
</html>