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>