|
|
@@ -11,7 +11,7 @@
|
|
|
</div>
|
|
|
<!-- <input bindinput="addressInputAction" id="address" class="text" placeholder="搜索" /> -->
|
|
|
</div>
|
|
|
- <van-tabs @click="clickTab" sticky >
|
|
|
+ <van-tabs @click="clickTab" sticky>
|
|
|
<van-tab v-for="item in categorieList" sticky :key="item.id" :title="item.name" :name="item.id">
|
|
|
</van-tab>
|
|
|
</van-tabs>
|
|
|
@@ -23,11 +23,11 @@
|
|
|
|
|
|
<script>
|
|
|
import Tabbar from '../../components/Tabbar.vue'
|
|
|
-import AMapLoader from "@amap/amap-jsapi-loader";
|
|
|
-import { institutional,institutions_search} from '../../api/index.js'
|
|
|
+import AMapLoader from '@amap/amap-jsapi-loader'
|
|
|
+import { institutional, institutions_search } from '../../api/index.js'
|
|
|
window._AMapSecurityConfig = {
|
|
|
securityJsCode: process.env.VUE_APP_AMAP_SECURITY,
|
|
|
-};
|
|
|
+}
|
|
|
const radius = 2500 //圆半径
|
|
|
var map
|
|
|
var mapCircle
|
|
|
@@ -36,79 +36,80 @@ var infoWindow
|
|
|
var placeSearch = ''
|
|
|
var address = ''
|
|
|
export default {
|
|
|
- components: { Tabbar },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- categoryId:'',
|
|
|
- addressInput:'',
|
|
|
- allInfo: {
|
|
|
- id: "",
|
|
|
- dictCode: 0,
|
|
|
- name: "全部",
|
|
|
- children: [],
|
|
|
- dictSort: 0,
|
|
|
- dictType: "cms_institutional_nature",
|
|
|
- },
|
|
|
- categorieList: [],
|
|
|
- latitude: 22.5436,
|
|
|
- longitude: 114.057999,
|
|
|
- institutionList: [], //获取的机构
|
|
|
- markers:[],
|
|
|
- addMarkersList:[]
|
|
|
- }
|
|
|
- },
|
|
|
- async mounted() {
|
|
|
- let that = this;
|
|
|
- //1. 调用爱山东获取经纬度
|
|
|
- lightAppJssdk.map.getLocation ({
|
|
|
- success:function(data){ //成功
|
|
|
- that.latitude =String(data.latitude)
|
|
|
- that.longitude =String(data.longitude)
|
|
|
- that.mapInit()
|
|
|
- },
|
|
|
- fail:function(err){ //错误
|
|
|
- that.mapInit()
|
|
|
- }
|
|
|
- })
|
|
|
+ components: { Tabbar },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ categoryId: '',
|
|
|
+ addressInput: '',
|
|
|
+ allInfo: {
|
|
|
+ id: '',
|
|
|
+ dictCode: 0,
|
|
|
+ name: '全部',
|
|
|
+ children: [],
|
|
|
+ dictSort: 0,
|
|
|
+ dictType: 'cms_institutional_nature',
|
|
|
+ },
|
|
|
+ categorieList: [],
|
|
|
+ latitude: 22.5436,
|
|
|
+ longitude: 114.057999,
|
|
|
+ institutionList: [], //获取的机构
|
|
|
+ markers: [],
|
|
|
+ addMarkersList: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ let that = this
|
|
|
+ //1. 调用爱山东获取经纬度
|
|
|
+ lightAppJssdk.map.getLocation({
|
|
|
+ success: function (data) {
|
|
|
+ //成功
|
|
|
+ that.latitude = String(data.latitude)
|
|
|
+ that.longitude = String(data.longitude)
|
|
|
+ that.mapInit()
|
|
|
+ },
|
|
|
+ fail: function (err) {
|
|
|
+ //错误
|
|
|
+ that.mapInit()
|
|
|
+ },
|
|
|
+ })
|
|
|
|
|
|
- // 2. 开发使用
|
|
|
- // that.mapInit()
|
|
|
-
|
|
|
- },
|
|
|
- created() {
|
|
|
- window.jumpDetailTap=(id)=>{
|
|
|
- this.$router.push({path:'/detail',query:{institutionsId:id}})
|
|
|
- }
|
|
|
- // this.getInstitutional()
|
|
|
- // this.getInstitutions_search()
|
|
|
- },
|
|
|
+ // 2. 开发使用
|
|
|
+ // that.mapInit()
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ window.jumpDetailTap = (id) => {
|
|
|
+ this.$router.push({ path: '/detail', query: { institutionsId: id } })
|
|
|
+ }
|
|
|
+ // this.getInstitutional()
|
|
|
+ // this.getInstitutions_search()
|
|
|
+ },
|
|
|
methods: {
|
|
|
async getInstitutional() {
|
|
|
- var institutionalData = await institutional();
|
|
|
+ var institutionalData = await institutional()
|
|
|
// institutionalData.data.splice(0, 0, this.allInfo);
|
|
|
this.categorieList = institutionalData.data
|
|
|
this.clickTab(this.categorieList[0].id)
|
|
|
},
|
|
|
|
|
|
- async getInstitutions_search() {
|
|
|
+ async getInstitutions_search() {
|
|
|
this.removeMarkers()
|
|
|
var institutionSearch = await institutions_search({
|
|
|
- "radius": radius,
|
|
|
- "institutionalTypeList": this.categoryId,
|
|
|
- "lat": this.latitude,
|
|
|
- "lng": this.longitude
|
|
|
+ radius: radius,
|
|
|
+ institutionalTypeList: this.categoryId,
|
|
|
+ lat: this.latitude,
|
|
|
+ lng: this.longitude,
|
|
|
})
|
|
|
let markersTemp = []
|
|
|
institutionSearch.rows.forEach((e, index) => {
|
|
|
markersTemp.push(this.formatData(e, index))
|
|
|
- });
|
|
|
+ })
|
|
|
this.institutionList = institutionSearch.rows
|
|
|
this.markers = markersTemp
|
|
|
- this.addMarkers();
|
|
|
+ this.addMarkers()
|
|
|
},
|
|
|
|
|
|
- removeMarkers:function() {
|
|
|
- if(this.addMarkersList.length>0) {
|
|
|
+ removeMarkers: function () {
|
|
|
+ if (this.addMarkersList.length > 0) {
|
|
|
map.clearInfoWindow()
|
|
|
map.remove(this.addMarkersList)
|
|
|
this.markers = []
|
|
|
@@ -119,63 +120,69 @@ export default {
|
|
|
addMarkers() {
|
|
|
let that = this
|
|
|
that.markers.forEach((item) => {
|
|
|
- let markerContent = '' +
|
|
|
+ let markerContent =
|
|
|
+ '' +
|
|
|
'<div class="custom-content-marker">' +
|
|
|
' <img :src="item.iconPath" />' +
|
|
|
- '</div>';
|
|
|
- let marker = new AMapOut.Marker({
|
|
|
- position: new AMapOut.LngLat(item.longitude,item.latitude),
|
|
|
- // content:markerContent,
|
|
|
- offset: new AMapOut.Pixel(0, 0),
|
|
|
- icon:new AMapOut.Icon({
|
|
|
- image:item.iconPath,
|
|
|
- imageSize:[28,31]
|
|
|
- }),
|
|
|
- title: item.id,
|
|
|
- extData:item.id
|
|
|
- });
|
|
|
- marker.on('click', markerTap);
|
|
|
+ '</div>'
|
|
|
+ let marker = new AMapOut.Marker({
|
|
|
+ position: new AMapOut.LngLat(item.longitude, item.latitude),
|
|
|
+ // content:markerContent,
|
|
|
+ offset: new AMapOut.Pixel(0, 0),
|
|
|
+ icon: new AMapOut.Icon({
|
|
|
+ image: item.iconPath,
|
|
|
+ imageSize: [28, 31],
|
|
|
+ }),
|
|
|
+ title: item.id,
|
|
|
+ extData: item.id,
|
|
|
+ })
|
|
|
+ marker.on('click', markerTap)
|
|
|
|
|
|
- function markerTap(e) {
|
|
|
- console.log('markerTap:')
|
|
|
- console.log(e)
|
|
|
- console.log( marker.getExtData())
|
|
|
- console.log( item.id)
|
|
|
- // var positionInfo = map.getPosition()
|
|
|
- // console.log('positionInfo:')
|
|
|
- // console.log(positionInfo)
|
|
|
- // 在地图上打开信息窗体
|
|
|
- var windowContent =
|
|
|
- '<div class="customCallout" onclick=jumpDetailTap('+'"'+ `${item.id}`+'"'+')>' +
|
|
|
+ function markerTap(e) {
|
|
|
+ console.log('markerTap:')
|
|
|
+ console.log(e)
|
|
|
+ console.log(marker.getExtData())
|
|
|
+ console.log(item.id)
|
|
|
+ // var positionInfo = map.getPosition()
|
|
|
+ // console.log('positionInfo:')
|
|
|
+ // console.log(positionInfo)
|
|
|
+ // 在地图上打开信息窗体
|
|
|
+ var windowContent =
|
|
|
+ '<div class="customCallout" onclick=jumpDetailTap(' +
|
|
|
+ '"' +
|
|
|
+ `${item.id}` +
|
|
|
+ '"' +
|
|
|
+ ')>' +
|
|
|
'<div class="customCallout_top">' +
|
|
|
- '<img class="icon" src=' + `${item.coverImgUrl}` + ' />' +
|
|
|
- '<div class="callout-right">' +
|
|
|
- '<div class="title">' +
|
|
|
- `${item.name}`+
|
|
|
- '</div>'+
|
|
|
- '<div class="name">' +
|
|
|
- `${item.contact}` + `${item.phone}` +
|
|
|
- '</div>' +
|
|
|
- '</div>' +
|
|
|
- '</div>'+
|
|
|
+ '<img class="icon" src=' +
|
|
|
+ `${item.coverImgUrl}` +
|
|
|
+ ' />' +
|
|
|
+ '<div class="callout-right">' +
|
|
|
+ '<div class="title">' +
|
|
|
+ `${item.name}` +
|
|
|
+ '</div>' +
|
|
|
+ '<div class="name">' +
|
|
|
+ `${item.contact}` +
|
|
|
+ `${item.phone}` +
|
|
|
+ '</div>' +
|
|
|
+ '</div>' +
|
|
|
+ '</div>' +
|
|
|
'<div class="address">' +
|
|
|
- `${item.detailedAddress}`+
|
|
|
+ `${item.detailedAddress}` +
|
|
|
'</div>' +
|
|
|
-
|
|
|
- '</div>';
|
|
|
- infoWindow.setContent(windowContent);
|
|
|
- // infoWindow.on('click', function windowCallback(e) {
|
|
|
- // console.log('窗体点击')
|
|
|
- // console.log(e)
|
|
|
- // // this.$router.push({path:'/detail',query:{institutionsId:e.id}})
|
|
|
- // });
|
|
|
+ '</div>'
|
|
|
+ infoWindow.setContent(windowContent)
|
|
|
+ // infoWindow.on('click', function windowCallback(e) {
|
|
|
+ // console.log('窗体点击')
|
|
|
+ // console.log(e)
|
|
|
+ // // this.$router.push({path:'/detail',query:{institutionsId:e.id}})
|
|
|
+ // });
|
|
|
|
|
|
- infoWindow.open(map, [e.lnglat.lng,e.lnglat.lat]);
|
|
|
- }
|
|
|
+ infoWindow.open(map, [e.lnglat.lng, e.lnglat.lat])
|
|
|
+ }
|
|
|
|
|
|
-
|
|
|
- that.addMarkersList.push(marker)
|
|
|
- map.add(marker)
|
|
|
+ that.addMarkersList.push(marker)
|
|
|
+ map.add(marker)
|
|
|
})
|
|
|
},
|
|
|
formatData(e) {
|
|
|
@@ -188,88 +195,93 @@ export default {
|
|
|
iconPath: mapIcon ? mapIcon : '/image/elderly/location.png',
|
|
|
width: 20,
|
|
|
height: 25,
|
|
|
- name:e.name,
|
|
|
- coverImgUrl:e.coverImgUrl,
|
|
|
- contact:e.contact,
|
|
|
- phone:e.phone,
|
|
|
- detailedAddress:e.detailedAddress,
|
|
|
+ name: e.name,
|
|
|
+ coverImgUrl: e.coverImgUrl,
|
|
|
+ contact: e.contact,
|
|
|
+ phone: e.phone,
|
|
|
+ detailedAddress: e.detailedAddress,
|
|
|
customCallout: {
|
|
|
display: 'BYCLICK', //ALWAYS BYCLICK
|
|
|
anchorX: 0,
|
|
|
- anchorY: -8
|
|
|
- }
|
|
|
+ anchorY: -8,
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
|
|
|
getMapIcon(institutionalTypeId) {
|
|
|
- let mapIconUrl;
|
|
|
+ let mapIconUrl
|
|
|
try {
|
|
|
this.categorieList.forEach((item, index) => {
|
|
|
item.children.forEach((childItem, childIndex) => {
|
|
|
if (institutionalTypeId == childItem.id) {
|
|
|
mapIconUrl = childItem.mapIconUrl
|
|
|
- throw Error();
|
|
|
+ throw Error()
|
|
|
}
|
|
|
- });
|
|
|
- });
|
|
|
+ })
|
|
|
+ })
|
|
|
} catch (e) {}
|
|
|
return mapIconUrl
|
|
|
},
|
|
|
|
|
|
/**地图初始化 */
|
|
|
- async mapInit(){
|
|
|
- let that = this;
|
|
|
- AMapOut = await AMapLoader.load({
|
|
|
- "key":process.env.VUE_APP_AMAP_KEY, // 申请好的Web端开发者Key,首次调用 load 时必填
|
|
|
- "version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
|
|
|
- "plugins": ["AMap.PlaceSearch", "AMap.AutoComplete", "AMap.Geolocation","AMap.InfoWindow"] //插件列表
|
|
|
+ async mapInit() {
|
|
|
+ let that = this
|
|
|
+ AMapOut = await AMapLoader.load({
|
|
|
+ key: process.env.VUE_APP_AMAP_KEY, // 申请好的Web端开发者Key,首次调用 load 时必填
|
|
|
+ version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
|
|
|
+ plugins: [
|
|
|
+ 'AMap.PlaceSearch',
|
|
|
+ 'AMap.AutoComplete',
|
|
|
+ 'AMap.Geolocation',
|
|
|
+ 'AMap.InfoWindow',
|
|
|
+ ], //插件列表
|
|
|
})
|
|
|
- map =new AMapOut.Map('container_home', {
|
|
|
+ map = new AMapOut.Map('container_home', {
|
|
|
// center: [117.743109, 36.862989],
|
|
|
- center: [that.longitude,that.latitude],
|
|
|
+ center: [that.longitude, that.latitude],
|
|
|
zoom: 13.5,
|
|
|
- resizeEnable : true
|
|
|
- });
|
|
|
- map.on('click',function mapClick(e) {
|
|
|
- console.log('点击')
|
|
|
+ resizeEnable: true,
|
|
|
+ })
|
|
|
+ map.on('click', function mapClick(e) {
|
|
|
+ console.log('点击')
|
|
|
console.log(e)
|
|
|
that.latitude = e.lnglat.lat
|
|
|
that.longitude = e.lnglat.lng
|
|
|
that.handleEvent()
|
|
|
})
|
|
|
- map.on('complete',function completeSource() {
|
|
|
+ map.on('complete', function completeSource() {
|
|
|
that.getInstitutional()
|
|
|
})
|
|
|
|
|
|
mapCircle = new AMapOut.Circle({
|
|
|
- center: new AMapOut.LngLat(that.longitude,that.latitude), // 圆心位置
|
|
|
- radius: radius, //半径
|
|
|
- strokeColor: "#fff", //线颜色
|
|
|
- strokeOpacity: 1, //线透明度
|
|
|
- strokeWeight: 2, //线粗细度
|
|
|
- fillColor: '#3B82F6',
|
|
|
- fillOpacity: 0.35 //填充透明度
|
|
|
- });
|
|
|
- map.add(mapCircle);
|
|
|
+ center: new AMapOut.LngLat(that.longitude, that.latitude), // 圆心位置
|
|
|
+ radius: radius, //半径
|
|
|
+ strokeColor: '#fff', //线颜色
|
|
|
+ strokeOpacity: 1, //线透明度
|
|
|
+ strokeWeight: 2, //线粗细度
|
|
|
+ fillColor: '#3B82F6',
|
|
|
+ fillOpacity: 0.35, //填充透明度
|
|
|
+ })
|
|
|
+ map.add(mapCircle)
|
|
|
|
|
|
var autoOptions = {
|
|
|
- city: "邹平",
|
|
|
- input: "address",
|
|
|
- };
|
|
|
+ city: '邹平',
|
|
|
+ input: 'address',
|
|
|
+ }
|
|
|
|
|
|
- var autocomplete =new AMapOut.AutoComplete(autoOptions);
|
|
|
- autocomplete.on("select", function selectAddress(e) {
|
|
|
+ var autocomplete = new AMapOut.AutoComplete(autoOptions)
|
|
|
+ autocomplete.on('select', function selectAddress(e) {
|
|
|
that.latitude = e.poi.location.lat
|
|
|
that.longitude = e.poi.location.lng
|
|
|
that.handleEvent(e)
|
|
|
- });
|
|
|
-
|
|
|
+ })
|
|
|
+
|
|
|
infoWindow = new AMapOut.InfoWindow({
|
|
|
- isCustom:true,
|
|
|
- closeWhenClickMap:true,
|
|
|
+ isCustom: true,
|
|
|
+ closeWhenClickMap: true,
|
|
|
anchor: 'top-center',
|
|
|
- offset: [0,-135]
|
|
|
- });
|
|
|
+ offset: [0, -135],
|
|
|
+ })
|
|
|
|
|
|
// var geolocation =new AMapOut.Geolocation({
|
|
|
// enableHighAccuracy: false,//是否使用高精度定位,默认:true
|
|
|
@@ -295,27 +307,23 @@ export default {
|
|
|
// });
|
|
|
// function onComplete(result) {
|
|
|
// console.log(result)
|
|
|
-
|
|
|
+
|
|
|
// }
|
|
|
// function onError(err) {
|
|
|
// console.log(err)
|
|
|
// }
|
|
|
-
|
|
|
},
|
|
|
|
|
|
// 从爱山东获取用户位置
|
|
|
getLocation() {
|
|
|
- return new Promise((resolve,reject)=>{
|
|
|
-
|
|
|
- })
|
|
|
-
|
|
|
+ return new Promise((resolve, reject) => {})
|
|
|
},
|
|
|
|
|
|
// 搜索以及点击地图后的处理
|
|
|
handleEvent() {
|
|
|
- map.setCenter([this.longitude,this.latitude],true,500)
|
|
|
- mapCircle.setCenter(new AMapOut.LngLat(this.longitude,this.latitude))
|
|
|
- this.removeMarkers();
|
|
|
+ map.setCenter([this.longitude, this.latitude], true, 500)
|
|
|
+ mapCircle.setCenter(new AMapOut.LngLat(this.longitude, this.latitude))
|
|
|
+ this.removeMarkers()
|
|
|
this.getInstitutions_search()
|
|
|
},
|
|
|
|
|
|
@@ -334,10 +342,17 @@ export default {
|
|
|
},
|
|
|
// 跳转到列表页
|
|
|
jumpRows() {
|
|
|
- this.$router.push({path:'/list',query:{longitude:this.longitude,latitude:this.latitude,categoryId:this.categoryId,radius:radius}})
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
+ this.$router.push({
|
|
|
+ path: '/list',
|
|
|
+ query: {
|
|
|
+ longitude: this.longitude,
|
|
|
+ latitude: this.latitude,
|
|
|
+ categoryId: this.categoryId,
|
|
|
+ radius: radius,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
|