如何在uniapp中引入腾讯地图

腾讯位置服务中选择Web端：

进入JavaScript

点击

找到helloworld例子：

将JavaScript放入到根目录下index.html中！（注意是index.html，而不是index.vue）

将剩余的部分改为vue3写法：

<template>
  <div id="container"></div>
</template>

<script>
export default {
  mounted() {
    // 在组件挂载后调用initMap函数初始化地图
    this.initMap();
  },
  methods: {
    initMap() {
      var center = new TMap.LatLng(39.984104, 116.307503);
      // 初始化地图
      var map = new TMap.Map("container", {
        rotation: 20, // 设置地图旋转角度
        pitch: 30, // 设置俯仰角度（0~45）
        zoom: 12, // 设置地图缩放级别
        center: center // 设置地图中心点坐标
      });
    }
  }
};
</script>

<style>
/* your component styles */
#container {
  width: 100vw;
  height: 100vh;
}
</style>

在这个基础上，根据demo中的例子，进行扩充：

首先认识map

根据demo的例子：

点位demo：

在具体代码中引入：

最后展示：

再引入多边形：

展示：

示例代码：

<template>
  <div id="container"></div>
</template>

<script>
export default {
  mounted() {
    // 在组件挂载后调用initMap函数初始化地图
    this.initMap();
  },
  methods: {
    initMap() {
      var center = new TMap.LatLng(31.184101122025186, 121.46160480084677);
      // 初始化地图
      var map = new TMap.Map("container", {
        rotation: 20, // 设置地图旋转角度
        pitch: 30, // 设置俯仰角度（0~45）
        zoom: 16, // 设置地图缩放级别
        center: center // 设置地图中心点坐标
      });
	  
	  // 增加点位标志
	  
	  var marker = new TMap.MultiMarker({
	  	map,
	  	styles: {
	  		marker: new TMap.MarkerStyle({
	  			width: 30,
	  			height: 30,
	  			anchor: {
	  				x: 20,
	  				y: 30
	  			},
	  		}),
	  	},
	  	geometries: [{
	  		position: center, // 使用中心坐标
	  		id: 'marker',
	  	}, ],
	  });
	  
	  
	  var polygonPath = [
	  	
	  	new TMap.LatLng(31.18657887137094, 121.4613902624335),
	  	new TMap.LatLng(31.185039304222467, 121.45731376851063),
	  	new TMap.LatLng(31.182893593591178, 121.46027463128189),
	  	new TMap.LatLng(31.18135424428632, 121.4634501696952),
	  	new TMap.LatLng(31.18291612478789, 121.46430815398048),
	  	new TMap.LatLng(31.18482682178128, 121.46272041515249),
	  	
	  	
	  ];
	  var polygon = new TMap.MultiPolygon({
	  	map, // 显示多边形图层的底图
	  	styles: { // 多边形的相关样式
	  		'polygon': new TMap.PolygonStyle({
	  			'color': 'rgba(41,91,255,0.16)', // 面填充色
	  			'showBorder': true, // 是否显示拔起面的边线
	  			'borderColor': 'rgba(41,91,255,1)', // 边线颜色
	  			'borderWidth': 3, // 边线宽度
	  			'borderDashArray': [5, 5] // 虚线数组
	  		}),
	  	},
	  	geometries: [{
	  		id: 'polygon', // 多边形图形数据的标志信息
	  		styleId: 'polygon', // 样式id
	  		paths: polygonPath, // 多边形的位置信息
	  	}],
	  });
	  
	  
	  
	  
	  
    }
  }
};
</script>

<style>
/* your component styles */
#container {
  width: 100vw;
  height: 100vh;
}
</style>

改成script setup写法：
 

<template>
  <div id="container"></div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'; // Import necessary functions from Vue 3
  import { useRouter } from 'vue-router'; // Import useRouter from Vue Router

  let map = null; // Initialize map variable
  const zoomLevel = ref(10); // Initial zoom level
  const router = useRouter(); // Get the router instance

  const initMap = () => {
    const center = new TMap.LatLng(31.187358368937858, 121.46002628131794);

    // Initialize the map with initial zoom level
    map = new TMap.Map("container", {
      rotation: 20,
      pitch: 30,
      zoom: zoomLevel.value, // Use zoomLevel from ref()
      center: center
    });

    // 点击屏幕查看经纬度
    map.addListener('click', function(event) {
      console.log(event)
      // console.log('Clicked LatLng:', event.latLng.lat(), event.latLng.lng());
    });
  };

  onMounted(() => {
    initMap();
  });
</script>

<style scoped>
  /* Your component styles */
  #container {
    width: 100vw;
    height: 100vh;
  }
</style>