1、从腾讯地图API官网注册一个开发秘钥
2.、index.html引入相关js文件
//地图api
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=yourkey"></script>
//定位
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
3.在vue页面中编写
<template>
<div>
<el-form :model="formData">
<el-form-item label="地理位置:">
<el-input type="text" placeholder="" v-model.trim="formData.location"></el-input>
</el-form-item>
<el-form-item label="详细地址:">
<div class="map-box">
<el-popover popper-class="createBook-pop" placement="bottom-start" ref="pop" trigger="manual" :visible-arrow="false">
<ul>
<li v-for="(item,index) in placeList" :key="index" @click="selectCom(item)">
{
{
item.address }}
</li>
</ul>
<el-input v-model.trim="formData.address" maxlength="30" @keyup.native="
e => (formData.name = e.target.value.replace(/\s/g, ''))
" placeholder="搜索地址" @input="getSearchPlace" @focus="focusShow" slot="reference"></el-input>
</el-popover>
<!-- 地图插件-->
<div id="container" style="width:800px;height:450px" class="mt-30"></div>
</div>
</el-form-item>
</el-form>
</div>
</template>
<script>
var _this;
export default {
data () {
return {
formData: {
address: "",
location: "",
lng: "",
lat: ""
},
//地图对象
map: null,
//地图中心
center: {
lat: 22.55329, lng: 113.88308 },
marker: null,
//周边地址检索列表
placeList: []
};
},
mounted () {
_this = this;
this.initMap();
},
methods: {
//选择周边地址
selectCom (row) {
this.$refs["pop"].doClose();
this.center = row.latLng;
this.removeMarker();
this.createMarker(row.latLng);
this.formData.address = row.address
this.formData.location = [row.latLng.lat, row.latLng.lng].join(",");
this.formData.lat = row.latLng.lat;
this.formData.lng = row.latLng.lng;
this.map.setCenter(row.latLng);
},
//显示搜索列表
focusShow (e) {
if (this.placeList.length) {
this.$refs["pop"].doShow();
}
},
// 根据输入地址进行逆向解析
async getSearchPlace () {
if (this.formData.address === '') {
_this.placeList = []
this.$refs["pop"].doClose();
return
}
//设置Poi检索服务，用于本地检索、周边检索
let searchService = new qq.maps.SearchService({
pageCapacity: 20,
complete: function (res) {
if (res.detail && res.detail.pois && res.detail.pois.length) {
let placeList = res.detail.pois.map(v => {
return {
latLng: v.latLng, address: v.address ? v.address : '' + v.name ? v.name : '' }
})
_this.placeList = placeList
_this.$refs["pop"].doShow();
} else {
_this.$refs["pop"].doClose();
}
},
})
searchService.setLocation('');
searchService.search(this.formData.address);
},
//地址逆向解析
geocoderAddress ({
lat, lng }) {
var geocoder = new qq.maps.Geocoder({
complete: function (res) {
// 标志位置
let center = new qq.maps.LatLng(lat, lng);
_this.center = center;
_this.formData.address =
res.detail.nearPois[0].address + res.detail.nearPois[0].name;
_this.formData.location = [
res.detail.nearPois[0].latLng.lat,
res.detail.nearPois[0].latLng.lng
].join(",");
_this.formData.lat = res.detail.nearPois[0].latLng.lat;
_this.formData.lng = res.detail.nearPois[0].latLng.lng;
}
});
var latLng = new qq.maps.LatLng(lat, lng);
geocoder.getAddress(latLng);
},
// 定位
getGeolocation () {
var geolocation = new qq.maps.Geolocation(
"yourkey",
"xxxx"
);
// 定位成功之后调用的方法
function showPosition (position) {
_this.map.setCenter(new qq.maps.LatLng(position.lat, position.lng));
// 逆地址解析(经纬度到地名转换过程)
_this.geocoderAddress(position);
}
function showErr () {
console.log("定位失败");
}
geolocation.getLocation(showPosition, showErr);
},
//创建标记
createMarker (center) {
//创建一个Marker
_this.marker = new qq.maps.Marker({
position: center,
map: _this.map
});
//自定义marker
//设置Marker的可见性，为true时可见,false时不可见，默认属性为true
_this.marker.setVisible(true);
//设置Marker的动画属性为从落下
_this.marker.setAnimation(qq.maps.MarkerAnimation.DOWN);
//设置Marker是否可以被拖拽，为true时可拖拽，false时不可拖拽，默认属性为false
_this.marker.setDraggable(true);
// 设置Marker自定义图标的属性，size是图标尺寸，该尺寸为显示图标的实际尺寸，origin是切图坐标，该坐标是相对于图片左上角默认为（0, 0）的相对像素坐标，anchor是锚点坐标，描述经纬度点对应图标中的位置
var anchor = new qq.maps.Point(0, 39),
size = new qq.maps.Size(42, 68),
origin = new qq.maps.Point(0, 0),
icon = new qq.maps.MarkerImage(
"https://wqbjz-pro.oss-cn-shenzhen.aliyuncs.com/4RWt4w_1602323235266.png",
size,
origin,
anchor
);
_this.marker.setIcon(icon);
//标记Marker点击事件
// qq.maps.event.addListener(marker, 'click', function () {
// TODO
// });
//设置Marker停止拖动事件
qq.maps.event.addListener(_this.marker, 'dragend', function () {
_this.center = _this.marker.getPosition();
// 获取经纬度逆解析地址
_this.geocoderAddress(_this.marker.getPosition());
});
},
//移除marker事件
removeMarker () {
if (_this.marker) {
_this.marker.setMap(null);
_this.marker = null;
}
},
// 初始化地址
initMap () {
var center = new qq.maps.LatLng(this.center.lat, this.center.lng);
var map = new qq.maps.Map(document.getElementById("container"), {
center: center,
zoom: 15
});
this.map = map;
this.createMarker(center);
this.geocoderAddress(center);
// // 监听地图点击事件
// qq.maps.event.addListener(map, "click", function (event) {
//
// // 获取经纬度逆解析地址
// _this.geocoderAddress(event.latLng);
// // map.setCenter(event.latLng);
// });
setTimeout(() => {
this.getGeolocation();
}, 500)
}
},
};
</script>