Skip to content

G
GaoQuIncubator
Commit 011fd781 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

marker dynamic data

parent 26748410
Expand all Show whitespace changes
Inline Side-by-side
Showing with 941 additions and 128 deletions
src/views/Screen/index.vue
View file @ 011fd781
<template> <template>
<div class="Screen cm-layout"> <div class="Screen cm-layout">
<div class="a_0"> <div class="a_0">
<!-- <cu-amap ref="amap" :options="amapOptions()" /> -->
<div id="container"></div> <div id="container"></div>
<div class="a0_"> <div class="a0_">
<header id="header"> <header id="header">
...@@ -106,6 +104,9 @@ import request from "@/utils/request"; ...@@ -106,6 +104,9 @@ import request from "@/utils/request";
function closeInfoWindow(mapEle) { function closeInfoWindow(mapEle) {
mapEle.clearInfoWindow(); mapEle.clearInfoWindow();
} }
function isTechUser(){
return localStorage.getItem('groupIdByloginType')*1===2 // 是否为科技局用户
}
export default { export default {
data() { data() {
return { return {
...@@ -172,77 +173,19 @@ export default { ...@@ -172,77 +173,19 @@ export default {
}); });
}, },
goBackendHome(){ goBackendHome(){
// if(localStorage.getItem('groupIdByloginType')*1 == 1){ // 孵化器用户
// location.href = '/home/enterprise'
// return
// }
// if(localStorage.getItem('groupIdByloginType')*1 == 2){ // 科技据用户
// location.href = '/home/tech'
// return
// }
// location.reload()
location.href = '/home/enterprise' location.href = '/home/enterprise'
}, },
initMap() { initMap() {
var VUE = this; var VUE = this;
VUE.map = new AMap.Map("container", { VUE.map = new AMap.Map("container", {
resizeEnable: true, resizeEnable: true,
center: [116.481181, 39.989792], center: [122.050189, 37.515189],
zoom: 13, zoom: 13,
}); });
console.log(VUE.map, "map"); console.log(VUE.map, "map");
// addMarker(); // addMarker();
var markers = [ this.getIncubatorMarkers()
{
position: [116.481181, 39.989792],
extraData: {
incubatorName: "23423",
operatingAgency: "111",
incubatorCount: 0,
graduationCount: 11,
totalArea: 22,
totalIncome: 223,
},
},
{
position: [116.305467, 39.989799],
extraData: {
incubatorName: "666",
operatingAgency: "111",
incubatorCount: 0,
graduationCount: 11,
totalArea: 22,
totalIncome: 223,
},
},
{
position: [116.305467, 39.807761],
extraData: {
incubatorName: "6664444",
operatingAgency: "111",
incubatorCount: 0,
graduationCount: 11,
totalArea: 22,
totalIncome: 223,
},
},
];
// 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
markers.forEach(function (item, index) {
var marker = new AMap.Marker({
map: VUE.map,
// position: [116.481181, 39.989792],
position: [item.position[0], item.position[1]],
icon: "/static/images/marker-dp.png",
});
//鼠标点击marker弹出自定义的信息窗体
marker.on("click", function () {
// VUE.infoWindow.open(VUE.map, marker.getPosition());
VUE.showInfoWindow(marker, item.extraData);
});
});
const item = {}; const item = {};
//实例化信息窗体 //实例化信息窗体
...@@ -260,7 +203,11 @@ export default { ...@@ -260,7 +203,11 @@ export default {
document.getElementById("goMoreBtn").onclick = function () { document.getElementById("goMoreBtn").onclick = function () {
// alert(this.getAttribute('data-id')) // alert(this.getAttribute('data-id'))
// VUE.$route.push('/home/enterprise') // VUE.$route.push('/home/enterprise')
location.href = "/home/tech?id=" + this.getAttribute("data-id"); if(isTechUser()){
location.href = "/home/overview?id=" + this.getAttribute("data-id");
}else{
location.href = "/home/enterprise?id=" + this.getAttribute("data-id");
}
}; };
}); });
}, },
...@@ -268,16 +215,16 @@ export default { ...@@ -268,16 +215,16 @@ export default {
const content = `<div class="popupBgImage" style=""> const content = `<div class="popupBgImage" style="">
<h4>详细信息</h4><i id="closeInfoWindowBtn"></i> <h4>详细信息</h4><i id="closeInfoWindowBtn"></i>
<dl> <dl>
<dd><font>孵化器名称：</font><span>${item.incubatorName}</span></dd> <dd class="textEllipsis"><font>孵化器名称：</font><span :title="${item.incubatorName}">${item.incubatorName}</span></dd>
<dd><font>运营机构：</font><span>${item.operatingAgency}</span></dd> <dd class="textEllipsis"><font>运营机构：</font><span :title="${item.operatingAgency}">${item.operatingAgency}</span></dd>
<dd><font>在孵企业：</font><span>${item.incubatorCount || 0}家</span></dd> <dd class="textEllipsis"><font>在孵企业：</font><span :title="${item.incubatorCount}">${item.incubatorCount || 0}家</span></dd>
<dd><font>毕业企业：</font><span>${item.graduationCount || 0}家</span></dd> <dd class="textEllipsis"><font>毕业企业：</font><span :title="${item.graduationCount}">${item.graduationCount || 0}家</span></dd>
<dd><font>使用总面积：</font><span>${item.totalArea || 0}(㎡)</span></dd> <dd><font>使用总面积：</font><span>${item.totalArea || 0}(㎡)</span></dd>
<dd><font>总收入：</font><span>${item.totalIncome || 0}万元</span></dd> <dd><font>总收入：</font><span>${item.totalIncome || 0}万元</span></dd>
</dl> </dl>
<button type="button" id="goMoreBtn" data-id="${ <button type="button" id="goMoreBtn" data-id="${
item.incubatorName item.id
}">更多</button> }">${isTechUser()?'更多':'进入后台'}</button>
</div>`; </div>`;
this.infoWindow.setContent(content); this.infoWindow.setContent(content);
this.infoWindow.open(this.map, marker.getPosition()); this.infoWindow.open(this.map, marker.getPosition());
...@@ -741,54 +688,44 @@ export default { ...@@ -741,54 +688,44 @@ export default {
}); });
}, },
amapOptions(cmap) { getIncubatorMarkers(){
var self = this; request({
var VUE = this; url: "api/homePage/incubatorLocation",
method: "get",
}).then((res) => {
let result = res.body || []
var markers = result.map((item, index)=>{
return { return {
zoom: 13, position: [item.longitude, item.latitude],
center: [122.050189, 37.515189], extraData: {
//showLabel: true, id: item.id,
//pitch: 40, incubatorName: item.incubatorName,
onload: function (cmap) { operatingAgency: item.operatingAgency,
console.log("onload ________________ ", self, cmap); incubatorCount: item.incubatorCount,
const form = { graduationCount: item.graduationCount,
longitude: 122.050189, totalArea: item.totalArea,
latitude: 37.515189, totalIncome: item.totalIncome,
}; }
self.cmap = cmap; }
// debugger })
VUE.cmap = cmap;
var center = cmap.options.center;
var lng = form.longitude || center[0],
lat = form.latitude || center[1];
if (lng && lat) {
cmap.setCenter([lng, lat]);
addMarker();
// // 添加标记
// cmap.addMarker({
// lnglat: [lng, lat],
// title: "",
// content: markerContent,
// offset: new AMap.Pixel(-13, -30),
// draggable: true,
// click: function () {
// infoWindow.open(cmap, marker.getPosition()); // 打开信息窗口
// },
// });
// //鼠标点击marker弹出自定义的信息窗体
// AMap.event.addListener(cmap, "click", function () {
// infoWindow.open(map, marker.getPosition());
// });
}
},
click: function (e, cmap) {
console.log("click ________________ ", cmap);
},
};
},
// 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
markers.forEach((item, index) => {
var marker = new AMap.Marker({
map: this.map,
// position: [116.481181, 39.989792],
position: [item.position[0], item.position[1]],
icon: "/static/images/marker-dp.png",
imageSize: new AMap.Size(22, 22),
});
//鼠标点击marker弹出自定义的信息窗体
marker.on("click", () => {
// VUE.infoWindow.open(VUE.map, marker.getPosition());
this.showInfoWindow(marker, item.extraData);
});
});
})
},
// 首页 // 首页
module0(m, t, f, dmIndex, view) { module0(m, t, f, dmIndex, view) {
var self = this, var self = this,
...@@ -1200,6 +1137,19 @@ export default { ...@@ -1200,6 +1137,19 @@ export default {
</script> </script>
<style lang="scss" scope> <style lang="scss" scope>
.amap-icon{ // 高德地图样式覆盖
img{
width:0.42rem !important;
height: 0.42rem !important;
}
}
.textEllipsis {
display: inline-block;
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 超出隐藏 */
text-overflow: ellipsis; /* 添加省略号 */
width: 320px; /* 设置宽度 */
}
#container { #container {
height: 100%; height: 100%;
width: 100%; width: 100%;
...@@ -1985,11 +1935,11 @@ export default { ...@@ -1985,11 +1935,11 @@ export default {
cursor: pointer; cursor: pointer;
} }
dl { dl {
padding: 0 0.4rem; padding: 0 0.25rem;
} }
dd { dd {
margin-top: 0.08rem; margin-top: 0.08rem;
margin-bottom: 0.08rem; // margin-bottom: 0.08rem;
} }
dd > font { dd > font {
// 标题 // 标题
......
src/views/system/home/overview.vue
View file @ 011fd781
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment