vue的腾讯地图插件使用教程(点击获取附近位置和经纬度)
地图插件
import maps from "qqmap";
效果图
废话不多说上代码
<template>
<div>
腾讯地图
<div
class="mapfont"
style="width: 100%"
>
<el-row>
<el-col
:lg="23"
:xl="23"
:md="23"
:sm="23"
:xs="23"
class="tips"
>
温馨提示:查询不到输入的位置时,请输入城市及完整的地域名!!!
</el-col>
<el-col
:lg="1"
:xl="1"
:md="1"
:sm="1"
:xs="1"
class="nobut"
>
<span @click="nobut">X</span>
</el-col>
</el-row>
<el-input
v-model="addressKeyword"
placeholder="请输入地址来直接查找相关位置"
clearable
>
<el-button
slot="append"
icon="el-icon-search"
@click="getAddressKeyword"
/>
</el-input>
<div
id="container"
style="width: 100%; height: 700px;"
/>
<div class="ybut">
<el-button @click="nobut">
取消
</el-button><el-button
type="primary"
@click="mapbut"
>
提交
</el-button>
</div>
</div>
</div>
</template>
<script>
import $ from "jquery";
import maps from "qqmap"
export default {
data(){
return{
//腾讯地图
map: null,
getAddress: null,
getAddCode: null,
addressKeyword: "",
longitude: 0, //经度
latitude: 0, //纬度
Latitudeandlongitude: "", //经纬度
address: "", //地址
}
},
mounted() {
this.inits();
},
methods:{
//地图
mapoff() {
},
nobut() {
this.address="";
},
mapbut(){
if(this.address==""){
this.$message({
message: '您还没有选择位置,请选择位置!!!',
type: 'warning'
});
}else{
var i= "经度:"+ this.longitude +",纬度:"+ this.latitude
alert( i +"地址:"+ this.address)
}
},
//初始化地图
inits() {
var that = this;
//使用自己的腾讯地图key
maps.init("W3YBZ-NW734-APUUL-XQTC4-76L2T-XXXX", () => {
var myLatlng = new qq.maps.LatLng(
30.45569387962833,
114.42734017968178
);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: qq.maps.MapTypeId.ROADMAP
};
that.map = new qq.maps.Map(
document.getElementById("container"),
myOptions
);
// 获取点击后的地址
qq.maps.event.addListener(that.map, "click", function(event) {
var marker = new qq.maps.Marker({
position: event.latLng,
map: that.map
});
// 获取点击后的地图坐标
that.longitude = event.latLng.lng; //经度
that.latitude = event.latLng.lat; //纬度
// console.log("获取位置")
that.getAddressCode();
qq.maps.event.addListener(that.map, "click", function(event) {
marker.setMap(null);
});
});
//调用地名显示地图位置并设置地址
that.getAddress = new qq.maps.Geocoder({
complete: function(result) {
that.map.setCenter(result.detail.location);
/输入调用地图经纬度和地址
that.longitude = result.detail.location.lat; //经度
that.latitude = result.detail.location.lng; //纬度
that.Latitudeandlongitude = that.longitude + "," + that.latitude; //经纬度
//获取地理位置
var data = {
location: that.Latitudeandlongitude,
/*换成自己申请的key*/
key: "Z6DBZ-JUHEX-GDY4N-T6BDJ-Y24OJ-XXXX",
get_poi: 0
};
var url = "https://apis.map.qq.com/ws/geocoder/v1/?";
data.output = "jsonp";
$.ajax({
type: "get",
dataType: "jsonp",
data: data,
jsonp: "callback",
jsonpCallback: "QQmap",
url: url,
success: function(json) {
var toStr = JSON.stringify(json);
that.address =
json.result.address +
json.result.formatted_addresses.recommend;
alert(that.Latitudeandlongitude+";"+that.address)
// console.log("地名调用")
},
error: function(err) {
alert("服务端错误,请刷新浏览器后重试");
}
});
}
});
//通过坐标来显示地图地址
that.getAddCode = new qq.maps.Geocoder({
complete: function(result) {
that.addressKeyword = result.detail.address;
}
});
});
},
//通过地址获得位置!!!!!!!!
getAddressKeyword() {
//通过getLocation();方法获取位置信息值
this.getAddress.getLocation(this.addressKeyword); //调用自带的接口
},
// 通过坐标获得地址
getAddressCode() {
var that = this;
var lat = parseFloat(that.latitude);
var lng = parseFloat(that.longitude);
var latLng = new qq.maps.LatLng(lat, lng);
that.Latitudeandlongitude = lat + "," + lng;
//获取地理位置
var data = {
location: that.Latitudeandlongitude,
/*换成自己申请的key*/
key: "Z6DBZ-JUHEX-GDY4N-T6BDJ-Y24OJ-XXXX",
get_poi: 0
};
var url = "https://apis.map.qq.com/ws/geocoder/v1/?";
data.output = "jsonp";
$.ajax({
type: "get",
dataType: "jsonp",
data: data,
jsonp: "callback",
jsonpCallback: "QQmap",
url: url,
success: function(json) {
var toStr = JSON.stringify(json);
that.address =
json.result.formatted_addresses.recommend;
// that.form.classField = that.address;
alert(that.Latitudeandlongitude+";"+that.address)
that.getAddCode.getAddress(latLng);
},
error: function(err) {
alert("服务端错误,请刷新浏览器后重试");
}
});
}
}
}
</script>
<style>
</style>