对接腾讯地图API，自定义控件拖拽获取中心点经纬度

介绍

地图组件中有一个标识固定在地图视图中心位置，鼠标拖拽地图获取当前中心标识对应的经纬度数据。

申请Key

腾讯地图开放平台：[https://lbs.qq.com/](https://lbs.qq.com/)

1. 登录后点击右上角 - 控制台 进入 key管理；
   
2. 点击 创建新密钥。填写相应信息后，会到key设置界面（也可通过key管理进入）
   
3. 启动产品：这里只用Web就好，其他默认。
   

代码实现

// 我单独建了个map.js文件
const mapKey = '这里填创建的key'; // 腾讯地图key

let map = null; // 存储地图主体

// 初始化 创建一个initMap的全局函数，地图资源异步回调callback
const init = () => {
	return new Promise((resolve, reject) => {
		if (!map) {
			window.initMap = function(){
				// eslint-disable-next-line no-undef
				map = qq;
				resolve(map);
			}
			var url = `https://map.qq.com/api/js?v=2.exp&key=${mapKey}&callback=initMap`;
			var jsApi = document.createElement('script');
			jsApi.charset = 'utf-8';
			jsApi.src = url;
			document.head.appendChild(jsApi);
		} else {
			resolve(map);
		}
	});
}

// 初始化地图
new qq.maps.Map(document.getElementById(‘container’), {
    center: new qq.maps.LatLng(30.211608, 120.162964),
    zoom: 11
});

// 增加自定义控件(地图视图中心的标识)
const customZoomDiv = document.createElement("img");
customZoomDiv.style.cssText = "width:20px;height:20px";
customZoomDiv.src='http://lbs.qq.com/javascript_v2/img/center.gif'
customZoomDiv.index = 1; //设置在当前布局中的位置
qq.maps.event.addListener(this.map, "dragend", () => { // 监听鼠标拖拽结束的事件
	console.log(this.map.center)
});
this.map.controls[qq.maps.ControlPosition.CENTER].push(customZoomDiv);

效果图