vue3使用天地图创建标记点

最近开发的项目要求使用天地图，之前没有接触过，研究一番就开始制作了，挺容易上手的，直接看效果吧

 引入方面就不在细说了

直接看标记点代码

//这是一个点击事件
 const allmarker = () => {var arrs = [ ];//这里面写自己的坐标数据(经纬度)
 //设置图标样式尺寸var icon = new T.Icon({iconUrl: "https://cdn-icons-png.flaticon.com/512/1483/1483336.png",iconSize: new T.Point(30, 30),iconAnchor: new T.Point(10, 56),});
 //循环坐标数组,创建标记点arrs.forEach((item, index) => {let markers = new T.Marker(new T.LngLat(item[0], item[1]), {
 //item[0]是经度，item[1]是纬度icon: icon,});wxMap.addOverLay(markers);
 //执行标记点函数addwindowclick(markers, index);});};

点击标记点出现弹窗

let addwindowclick = (marker, i) => {marker.addEventListener("click", function (e) {
 //点击坐标点切换中心点（可以不写）Longitude.value = marker.or.lng;Latitude.value = marker.or.lat;wxMap.centerAndZoom(new T.LngLat(Longitude.value, Latitude.value),zoom.value);
 //下面的步骤必须写var point = e.lnglat;// 创建信息窗口对象var markerInfoWin = new T.InfoWindow();var sContent = `
//自定义窗体内容
`;
 //设置信息窗口要显示的内容markerInfoWin.setContent(sContent);
 //setOffset设置信息浮窗显示时向右下角偏移量（像素）。-30则代表向上偏移markerInfoWin.setOffset(new T.Point(0, -15));
 //开启信息窗口wxMap.openInfoWindow(markerInfoWin, point);

 功能就是这样，更多方法可以认真分析官方示例中心

天地图示例中心http://lbs.tianditu.gov.cn/api/js4.0/examples.html

文章仅限参考 如有错误请及时指出或补充