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

5 篇文章 0 订阅
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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值