前端引入腾讯地图

1、引入腾讯地图前先申请密钥(https://lbs.qq.com/)
2、申请完密钥后，在你的文件中引入腾讯地图

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=你的密钥"></script>

3、接下来就可以开发你的地图，想要什么类型可以看腾讯地图官网(https://lbs.qq.com/)，举例如下：

<script>
	// 这里的定位（经纬度），不知道经纬度也可以使用腾讯地图工具查找
	 let longitude = "113.366534",
			 latitude = "22.978183",
			 labelAddres = " ",
			 jlon = "113.366534",
			 jlat = "22.978183"
		 initMap(longitude, latitude, labelAddres, jlon, jlat);


	 //地图初始化函数，本例取名为init，开发者可根据实际情况定义
	 function initMap(lon, lat, title, jlon, jlat) {

		 //定义地图中心点坐标
		 var center = new TMap.LatLng(lat, lon);
		 //定义map变量，调用 TMap.Map() 构造函数创建地图
		 var map = new TMap.Map(document.getElementById('container'), {
			 center: center, //设置地图中心点坐标
			 zoom: 15, //设置地图缩放级别
		 });
		 //初始化marker
		 var marker = new TMap.MultiMarker({
			 id: "marker-layer", //图层id
			 map: map,
			 styles: { //点标注的相关样式
				  marker: new TMap.MarkerStyle({
					 width: 30, // 样式宽
					 height: 40, // 样式高
					 anchor: { x: 10, y: 30 }, // 描点位置
				   }),
			 },
			 geometries: geometries(lat, lon, jlat, jlon)
		 });

		//初始化infoWindow
				var infoWindow = new TMap.InfoWindow({
				  map: map,
				  position: new TMap.LatLng(22.978183,113.366534),
				  offset: { x: 0, y: -32 }, //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
				});
				//监听标注点击事件
				infoWindow.open(); //打开信息窗
				infoWindow.setContent(`<div class ="containerp">我在<p>国家软件产业基地天河华景园区</p>附近>
				   </div>`);//设置信息窗内容
		 //初始化label
		 var label = new TMap.MultiLabel({
			 id: 'label-layer',
			 map: map, //设置折线图层显示到哪个地图实例中
			 //文字标记样式
			 styles: {
				 'label_1': labelColor('rgba(0,0,0,0.8)'),
			 },
			 //文字标记数据
			 geometries: labelgeometries(center, title, jlat, jlon)
		 });
	 }

	 function labelColor(color) {
		 return new TMap.LabelStyle({
			 'color': color, //颜色属性
			 'size': 16, //文字大小属性

			 'offset': {
				 x: 0,
				 y: -40
			 }, //文字偏移属性单位为像素
			 'angle': 0, //文字旋转属性
			 'alignment': 'center', //文字水平对齐属性
			 'verticalAlignment': 'middle' //文字垂直对齐属性
		 })
	 }

	 function labelgeometries(center, title, jlat, jlon) {
		 return [{
			 'id': 'label_1', //点图形数据的标志信息
			 'styleId': 'label_1', //样式id
			 'position': center, //标注点位置
			 'content': title, //标注文本
		 }];
	 }

	 function setMarkImg(src) {
		 return new TMap.MarkerStyle({
			 "width": 35,
			 "height": 40,
			 "anchor": {
				 x: 16,
				 y: 32
			 },
			 "src": src
		 })
	 }

	 function geometries(lat, lon, jlat, jlon) {
		 return [{ //点标注数据数组
			 "id": "marker",
			 "styleId": "marker",
			 "position": new TMap.LatLng(lat, lon),
			 "properties": {
				 "title": "marker"
			 }
		 }];
	 }

效果：

注意经纬度不要写反，写反会报以下错误：