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

水深无声 2022-09-12 01:43 280阅读 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>