效果图(样式丑):
1、在index.html中引入腾讯地图包:
<script src="https://map.qq.com/api/gljs?v=1.exp&key=TKUBZ-D24AF-GJ4JY-JDVM2-IBYKK-KEBCU"></script>
腾讯地图秘钥 https://lbs.qq.com/dev/console/key/manage;
2、组件代码
<template>
<div class="map">
<div>
<el-form :inline="true">
<el-form-item label="详细地址:">
<el-input v-model="body.keyword" placeholder="请输入详细地址"></el-input>
</el-form-item>
<el-form-item>
<el-button type='primary' @click='search'>搜索</el-button>
</el-form-item>
</el-form>
<div ref='mapView'></div>
</div>
<div class="addrs">
<div class="addr-item" v-for="item in address" @click.stop="select_item(item)">
<p> {{ item.title }}</p>
<p>{{ item.tel }}</p>
</div>
</div>
</div>
</template>
<script>
import { getLatLng } from "../../../apis/store.js"
export default {
props: ['mapAddr'],
data() {
return {
marker: null,
map: null,
body: {
keyword: '',
page_size: 10,
page_index: 1
},
address: []
}
},
mounted() {
this.body.keyword = this.mapAddr;
this.search();
},
methods: {
initMap(lat = 23.086966, lng = 113.366729) {
let center = new window.TMap.LatLng(lat, lng)
let container = this.$refs.mapView;
container.innerHTML = '';
this.map = new window.TMap.Map(container, {
center: center, // 设置地图中心点坐标
zoom: 17.2, // 设置地图缩放级别
pitch: 43.5, // 设置俯仰角
rotation: 45 // 设置地图旋转角度
})
this.map.on("click", this.getPoint);
this.createMarker(lat, lng);
},
getPoint(evt) {
var lat = Number(evt.latLng.getLat().toFixed(6));
var lng = Number(evt.latLng.getLng().toFixed(6));
this.createMarker({ lat, lng })
},
createMarker(lat, lng) {
this.removeMarker();
if (!this.marker) {
this.marker = new window.TMap.MultiMarker({
id: 'marker-layer',
map: this.map,
styles: {
"marker": new window.TMap.MarkerStyle({
"width": 25,
"height": 35,
"anchor": { x: 16, y: 32 },
"src": "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker-pink.png"
})
},
geometries: [{
"id": 'demo',
"styleId": 'marker',
"position": new window.TMap.LatLng(lat, lng),
"properties": {
"title": "marker"
}
}]
});
}
},
//移除marker事件
removeMarker() {
if (this.marker) {
this.marker.setMap(null);
this.marker = null;
}
},
search() {
getLatLng(this.body).then(resp => {
if (resp.code === 200) {
this.address = resp.data;
if (this.address.length > 0) {
let obj = this.address[0].location;
this.initMap(obj.lat, obj.lng)
}
}
})
},
select_item(item) {
this.$emit("save", item);
}
}
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.map {
position: relative;
text-align: left;
margin-left: -24px;
margin-top: -24px;
.el-form {
padding-top: 15px;
padding-left: 224px;
.el-input {
width: 300px;
}
}
.addrs {
z-index: 9999;
position: absolute;
top: 0;
left: 0;
background-color: #d7d7d7;
width: 200px;
height: 100%;
overflow-y: scroll;
.addr-item {
padding: 4px;
border-radius: 2px;
background-color: #fff;
margin: 4px;
}
}
}
</style>
3、服务端处理跨越接口(可以用JSONP方式回调函数):
腾讯返回的数据:
腾讯接口文档: