|
|
|
|
@ -5,7 +5,7 @@
|
|
|
|
|
<i @click='closeWin' class="el-icon-close"></i>
|
|
|
|
|
<div v-for="item in openData">
|
|
|
|
|
<p>姓名：<span>{{item.name}}</span></p>
|
|
|
|
|
<p>现居住地：<span>{{item.address}}dlkfijfdf;ld</span></p>
|
|
|
|
|
<p>现居住地：<span>{{item.reside}}</span></p>
|
|
|
|
|
<p class="showInfo" @click="showInfo(item.id)">查看详情</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -13,44 +13,37 @@
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
// 建议将zoom,center等可配置的项均写在配置文件中，方便打包之后进行修改。
|
|
|
|
|
// 建议将zoom,center等可配置的项均写在配置文件中，方便打包之后进行修改。
|
|
|
|
|
import {
|
|
|
|
|
index
|
|
|
|
|
} from "@/api/system/baseForm.js"
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
zoom: 13,
|
|
|
|
|
center: [119.431911, 31.678932],
|
|
|
|
|
zoom: 11,
|
|
|
|
|
center: [119.597897,31.723247],
|
|
|
|
|
mapHeight: 0,
|
|
|
|
|
map: null,
|
|
|
|
|
infoWindow: null,
|
|
|
|
|
openData: [],
|
|
|
|
|
// markerList: [],
|
|
|
|
|
mapList: [{
|
|
|
|
|
id: 1,
|
|
|
|
|
name: '小王',
|
|
|
|
|
address: '广东省广州市海珠区',
|
|
|
|
|
lnglats: [119.655114, 31.726251]
|
|
|
|
|
}, {
|
|
|
|
|
id: 2,
|
|
|
|
|
name: '小张',
|
|
|
|
|
address: '广东省广州市黄埔区',
|
|
|
|
|
lnglats: [119.471972, 31.578163]
|
|
|
|
|
}]
|
|
|
|
|
mapList: []
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
mounted() {
|
|
|
|
|
this.initHeight()
|
|
|
|
|
this.$nextTick(function() {
|
|
|
|
|
this.mapInit()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
this.getindex()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
initHeight() {
|
|
|
|
|
async initHeight() {
|
|
|
|
|
let winHeight = document.body.clientHeight
|
|
|
|
|
this.mapHeight = winHeight - 50 - 20
|
|
|
|
|
},
|
|
|
|
|
// 初始化地图，并加载行政区域
|
|
|
|
|
mapInit() {
|
|
|
|
|
async mapInit() {
|
|
|
|
|
this.map = new AMap.Map("map", {
|
|
|
|
|
center: this.center,
|
|
|
|
|
mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", // 设置地图的显示样式
|
|
|
|
|
@ -60,7 +53,6 @@
|
|
|
|
|
let that = this
|
|
|
|
|
let adcode = ['320413'];
|
|
|
|
|
this.areaBG(this.map, adcode);
|
|
|
|
|
this.setMapMarker()
|
|
|
|
|
this.infoWindow = new AMap.InfoWindow({
|
|
|
|
|
isCustom: true,
|
|
|
|
|
autoMove: true,
|
|
|
|
|
@ -104,10 +96,11 @@
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 增加信息窗口
|
|
|
|
|
setMapMarker() {
|
|
|
|
|
// 增加点位
|
|
|
|
|
setMapMarker() {
|
|
|
|
|
|
|
|
|
|
console.log("mapList",this.mapList)
|
|
|
|
|
let makerList = []
|
|
|
|
|
//自定义信息窗体
|
|
|
|
|
this.mapList.forEach((item) => {
|
|
|
|
|
// 遍历生成多个标记点
|
|
|
|
|
let marker = new AMap.Text({
|
|
|
|
|
@ -115,7 +108,7 @@
|
|
|
|
|
text: item.name,
|
|
|
|
|
zIndex: 9999999,
|
|
|
|
|
offset: new AMap.Pixel(-13, -30),
|
|
|
|
|
position: item.lnglats,
|
|
|
|
|
position: [item.longitude,item.latitude],
|
|
|
|
|
clickable: true,
|
|
|
|
|
extData: item.id,
|
|
|
|
|
style: {
|
|
|
|
|
@ -134,16 +127,66 @@
|
|
|
|
|
});
|
|
|
|
|
this.map.add(makerList)
|
|
|
|
|
// 自动适应显示想显示的范围区域
|
|
|
|
|
this.map.setFitView();
|
|
|
|
|
this.map.setZoom(11)
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
closeWin() {
|
|
|
|
|
this.infoWindow.close()
|
|
|
|
|
},
|
|
|
|
|
showInfo(id) {
|
|
|
|
|
this.$router.push({path:"/record/personinfo",query:{id:id}})
|
|
|
|
|
},
|
|
|
|
|
async getindex() {
|
|
|
|
|
let res = await index({
|
|
|
|
|
page_size: 99999,
|
|
|
|
|
page: 1,
|
|
|
|
|
table_name: 'records',
|
|
|
|
|
})
|
|
|
|
|
let _data = []
|
|
|
|
|
for(var k of res.data){
|
|
|
|
|
if(k.longitude&&k.latitude){
|
|
|
|
|
_data.push(k)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.mapList = _data
|
|
|
|
|
this.setMapMarker()
|
|
|
|
|
var geocoder = null
|
|
|
|
|
let that = this
|
|
|
|
|
// AMap.plugin("AMap.Geocoder",function(){
|
|
|
|
|
// geocoder = new AMap.Geocoder({
|
|
|
|
|
// city: '常州市' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
|
|
|
|
|
// })
|
|
|
|
|
// let _data = []
|
|
|
|
|
// for(var k of res.data){
|
|
|
|
|
// if(k.longitude==null||k.latitude==null){
|
|
|
|
|
// console.log(k.name)
|
|
|
|
|
// let m = k
|
|
|
|
|
// let _reside = k.reside
|
|
|
|
|
// console.log(_reside)
|
|
|
|
|
// geocoder.getLocation(_reside, function(status, result) {
|
|
|
|
|
// console.log(_reside)
|
|
|
|
|
// if (status === 'complete' && result.info === 'OK') {
|
|
|
|
|
// // result中对应详细地理坐标信息
|
|
|
|
|
|
|
|
|
|
// m.longitude = result.geocodes[0].location.lng
|
|
|
|
|
// m.latitude = result.geocodes[0].location.lat
|
|
|
|
|
// console.log("m",m)
|
|
|
|
|
// _data.push(m)
|
|
|
|
|
// console.log("_data",_data)
|
|
|
|
|
// return
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
// }else{
|
|
|
|
|
// console.log("---",k.name)
|
|
|
|
|
// _data.push(k)
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// that.mapList = _data
|
|
|
|
|
// // that.setMapMarker()
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
