vue如何使用腾讯地图JavaScript API GL进行打点标记

1.创建一个TMap.js文件
export function TMap0() {
return new Promise(function (resolve, reject) {
window.init = function () {
resolve(window.TMap)//注意这里
}
var script = document.createElement(“script”);
script.type = “text/javascript”;
script.src = “https://map.qq.com/api/gljs?v=1.exp&callback=init&key=”+‘EYOBZ-4XV6O-X75WV-SNZSM-ROXD7-IAFQB’; //EYOBZ-4XV6O-X75WV-SNZSM-ROXD7-IAFQB是你申请的key
script.onerror = reject;
document.head.appendChild(script);
})
}

2.我创建了一个shoplist.vue,我这个页面需要使用地图
script里面
import { TMap0 } from ‘@/common/js/TMap.js’ //导入TMap.js
// 然后下面就是我使用地图打点的业务逻辑
TMap0().then(TMap => {
var center = new window.TMap.LatLng(data2[0].latitude,data2[0].longitude);
var map = new window.TMap.Map(document.getElementById(“container”), {
// 地图的中心地理坐标
center: center,
//初始化地图缩放级别
zoom: 11
});

					//添加标记
					console.log('添加标记')
					for(let i=0;i<data2.length;i++){
						
						
 
						var marker = new window.TMap.MultiMarker({
						map: map,
						styles: {
						//创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
						"myStyle": new window.TMap.MarkerStyle({ 
							"width": 32,  // 点标记样式宽度（像素）
							"height": 32, // 点标记样式高度（像素）
							"src": 'http://wx.huahejm.com/dangpu/web/dw.jpg',  //图片路径
							//焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
							"anchor": { x: 0, y: 0 }  
						}) 
					},
					//点标记数据数组
					geometries: [{
						"id": i,   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
						"styleId": 'myStyle',  //指定样式id
						"position": new window.TMap.LatLng(data2[i].latitude,data2[i].longitude),  //点标记坐标位置
						"properties": {//自定义属性
							"title": "marker1"
						}
					}
					]	 
					})
					
						// var anchor = new window.TMap.Point(0, 0),
						// 			 size = new window.TMap.Size(32, 32),
						// 			 origin = new window.TMap.Point(0, 0),
						// 			 markerIcon = new window.TMap.MarkerImage(
						// 	 "../../../assets/images/tx.jpg",
						// 	 size,
						// 	 origin,
						// 	 anchor
						//  );
						//  marker.setIcon(markerIcon);
						 console.log('添加标记完成')
						//  marker.libraryName = data[i].name
					

					//初始化infoWindow
					var infoWindow = new  window.TMap.InfoWindow({
						map: map,
						position: new  window.TMap.LatLng(data2[i].latitude,data2[i].longitude),
						offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
					});

					infoWindow.close();//初始关闭信息窗关闭

					//监听标注点击事件
					marker.on("click", function (evt) {
						//设置infoWindow
						infoWindow.open(); //打开信息窗
						infoWindow.setPosition(new window.TMap.LatLng(data2[i].latitude,data2[i].longitude));//设置信息窗位置
						infoWindow.setContent('<div class="col" style="white-space:'+
				        'nowrap;margin:10px;"> <div>店铺:' + data2[i].name+ '</div><div >地址:' + data2[i].address+ '</div></div>');//设置信息窗内容
					})



				    // window.TMap.event.addListener(marker, 'click', function() {
				    //     infoWin.open();
				    //     infoWin.setContent('<div class="col" style="white-space:'+
				    //     'nowrap;margin:10px;"> <div>店铺:' + data[i].name+ '</div><div >地址:' + data[i].address+ '</div></div>');
				    //     //提示窗位置
				    //     infoWin.setPosition(new window.TMap.LatLng(data[i].latitude,data[i].longitude));
						
					// })
					

					}
				})