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));
						
					// })
					

					}
				})