vue 获取坐标 及 调用腾讯地图

addrHand() {
				let that = this
				console.log(that.jobsUserId)
				$.ajax({
					type: "get",
					dataType: 'jsonp',
					data: {
						key: "youkey", // 填申请到的腾讯key
						address:that.address, //具体的地址
						output: 'jsonp' //返回格式：支持JSON/JSONP，默认JSON
					},
					jsonp: "callback",
					jsonpCallback: "QQmap",
					url: "https://apis.map.qq.com/ws/geocoder/v1/?",
					success: function(json) {
						console.log(that.address)
						if (json.status == 0) {
							that.latitude = json.result.location.lat
							that.longitude = json.result.location.lng
							that.map(that.latitude,that.longitude)
							that.$message({
								message: '成功获取位置的经纬度',
								type: 'success'
							})
						} else {
							that.$message.error('获取该位置经纬度失败')
						}
					},
					error: function(err) {
						that.$message.error('异常错误，请刷新浏览器后重试')
					}
				})
			},
			map(latitude,longitude) {
					 var center = new TMap.LatLng(latitude, longitude);//设置中心点坐标
					 //初始化地图
					 var map = new TMap.Map(container, {
						 center: center
					 });  
					 //初始化marker
					 var marker = new TMap.MultiMarker({
						 id: "marker-layer", //图层id
						 map: map,
						 styles: { //点标注的相关样式
							 "marker": new TMap.MarkerStyle({
								 "width":50,
								 "height":50,
								 "anchor": { x: 16, y: 32 },
								 "src": "../../static/img/marker.png"
							 })
						 },
						 geometries: [{ //点标注数据数组
							 "id": "demo",
							 "styleId": "marker",
							 "position": new TMap.LatLng(latitude, longitude),
							 "properties": {
								 "title": "marker"
							 }
						 }]
					 });
			},


 index.html
 <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=youkey"></script>

标签：map,TMap,vue,longitude,latitude,调用,腾讯,marker,new
来源： https://blog.csdn.net/u014748857/article/details/120364102