腾讯地图开发文档:https://lbs.qq.com/webApi/javascriptV2/jsGuide/jsOverview
腾讯地图开发文档:https://lbs.qq.com/service/webService/webServiceGuide/webServiceOverview
开发需求:
- 点击地图时只添加一个标记
- 搜索输入的地址并展示在地图上(检索服务)
重要代码如下:
- 页面引入
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=申请的密钥&libraries=place"></script>
- 地图dom元素
<el-form-item label="详细地址" prop="detailedAddress">
<el-input v-model="editData.detailedAddress" ref="place"></el-input>
</el-form-item>
<el-form-item label="">
<div id="map" ref="map" style="height: 270px"></div>
</el-form-item>
- 封装的方法
mapInit(lng, lat) {
let that = this;
var marker;
// 创建地图实例
let center = new qq.maps.LatLng(lat || 29.548816 , lng || 106.545714);//设置中心点坐标
//初始化地图
var map = new qq.maps.Map(this.$refs.map, {
center,//设置地图中心点坐标
zoom: 13 //设置地图缩放级别
});
//标注表示地图上的点,可自定义标注的图标
marker = new qq.maps.Marker({
position: center,
map: map
});
//文本输入提示
var ap = new qq.maps.place.Autocomplete(
this.$refs.place.$el.querySelector("input")
);
var keyword = "";
//调用Poi检索类。用于进行本地检索、周边检索等服务。
var searchService = new qq.maps.SearchService({
complete: function(results) {
console.log(results);
if (results.type === "CITY_LIST") {
searchService.setLocation(results.detail.cities[0].cityName);
searchService.search(keyword);
return;
}
var pois = results.detail.pois;
var latlngBounds = new qq.maps.LatLngBounds();
latlngBounds.extend(pois[0].latLng);
map.fitBounds(latlngBounds);
//对搜索的地址添加标注
let searchCenter = new qq.maps.LatLng(pois[0].latLng.lat || 29.548816 , pois[0].latLng.lng || 106.545714);
marker = new qq.maps.Marker({
position: searchCenter,
map: map
});
}
});
//添加监听事件 获取鼠标点击事件
qq.maps.event.addListener(map, "click", function(event) {
console.log("event", event);
let { lat, lng } = event.latLng;
that.editData.latitude = lat;
that.editData.longitude = lng;
if (!marker) {
marker = new qq.maps.Marker({
position: event.latLng,
map: map
});
} else {
marker.setPosition(event.latLng);
}
//需要后端封装此接口解决跨域 https://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&get_poi=1
let url = 接口 + '?key=申请的密钥&location='+lat +','+lng+'&getPoi=0';
that.get(url).then(res => {
const addComp = res.data.result.address_component;
const detailedAddress = addComp.province + addComp.city + addComp.district + addComp.street + addComp.street_number;
that.editData.detailedAddress = detailedAddress;
})
});
//添加监听事件
qq.maps.event.addListener(ap, "confirm", function(res) {
keyword = res.value;
searchService.search(keyword);
});
},