Vue3 usa o mapa Tiandi para criar pontos de marcação

O projeto desenvolvido recentemente requer o uso de Tiandi. Ainda não havia tocado. Depois de algumas pesquisas, comecei a fazer. É muito fácil de usar. Vamos ver o efeito.

 Não vou entrar em detalhes sobre a introdução.

Olhe diretamente para o código do ponto de marcação

//这是一个点击事件
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);
      });
    };

Clique no marcador para exibir uma janela pop-up

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 = `
        <div id="win_box">
          //自定义窗体内容
		</div>`;
//设置信息窗口要显示的内容
        markerInfoWin.setContent(sContent);
//setOffset设置信息浮窗显示时向右下角偏移量（像素）。-30则代表向上偏移
        markerInfoWin.setOffset(new T.Point(0, -15));
//开启信息窗口
        wxMap.openInfoWindow(markerInfoWin, point);

 Esta é a função, mais métodos podem analisar seriamente o centro de exemplo oficial

Tianditu Example Center http://lbs.tianditu.gov.cn/api/js4.0/examples.html

O artigo é apenas para referência. Se houver algum erro, por favor, aponte ou complemente-o a tempo