Skip to content

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

amap marker

parent 6f319043
Show whitespace changes
Inline Side-by-side
Showing with 670 additions and 481 deletions
src/views/Screen/index.vue
View file @ 83516382
<template>
<div class="Screen cm-layout">
<div class="a_0">
<cu-amap
ref="amap"
:options="amapOptions()"
/>
<!-- <cu-amap ref="amap" :options="amapOptions()" /> -->
<div id="container"></div>
<div class="a0_">
<header id="header">
<div class="b1_bg">
......@@ -102,14 +99,18 @@
<script>
import { reqApi } from "@/assets/js/httpApi.js";
import { Highchart } from "@/assets/js/chartTemplates.js";
import cuAmap from '@/components/AMap';
import request from '@/utils/request'
import cuAmap from "@/components/AMap";
import request from "@/utils/request";
//关闭信息窗体
function closeInfoWindow(mapEle) {
mapEle.clearInfoWindow();
}
export default {
data() {
return {
map: null,
infoWindow: null,
navActive: null,
sjzlList: [],
srphList: [],
......@@ -119,11 +120,10 @@ export default {
},
};
},
components: {cuAmap },
components: { cuAmap },
mounted() {
var that = this;
this.$nextTick(() => {
/**
* 1、地图渲染
* 1-1、地图坐标点定位回显，marker事件添加
......@@ -134,47 +134,110 @@ export default {
*
*
*/
this.initMap();
this.navActive = 0
this.navActive = 0;
// 获取总览数据
this.sjzl()
this.sjzl();
this.srph()
this.qycxcysjfx()
this.fhqfhqysjfx()
this.fhqyndsjsfbhqs()
this.zfqyndsjsfbhqs()
this.srph();
this.qycxcysjfx();
this.fhqfhqysjfx();
this.fhqyndsjsfbhqs();
this.zfqyndsjsfbhqs();
// const map = new AMap.Map('map', {
// resizeEnable: true,
// center: [116.397128, 39.916527], // 设置中心坐标
// zoom: 10, // 设置缩放级别
// viewMode: '3D' // 3D视图
// });
})
});
},
methods: {
sjzl () { // 数据总览
initMap() {
var VUE = this;
VUE.map = new AMap.Map("container", {
resizeEnable: true,
center: [116.481181, 39.989792],
zoom: 13,
});
console.log(VUE.map, "map");
addMarker();
//添加marker标记
function addMarker() {
VUE.map.clearMap();
var marker = new AMap.Marker({
map: VUE.map,
position: [116.481181, 39.989792],
icon: "/static/images/marker-dp.png",
});
//鼠标点击marker弹出自定义的信息窗体
marker.on("click", function () {
VUE.infoWindow.open(VUE.map, marker.getPosition());
});
}
const item = {};
//实例化信息窗体
var title =
'方恒假日酒店<span style="font-size:11px;color:#F00;">价格:318</span>',
content = `<div class="popupBgImage" style="">
<h4>详细信息</h4><i id="closeInfoWindowBtn"></i>
<dl>
<dd><font>孵化器名称：</font><span>${item.incubatorName}</span></dd>
<dd><font>运营机构：</font><span>${item.operatingAgency}</span></dd>
<dd><font>在孵企业：</font><span>${item.incubatorCount || 0}家</span></dd>
<dd><font>毕业企业：</font><span>${item.graduationCount || 0}家</span></dd>
<dd><font>使用总面积：</font><span>${item.totalArea || 0}(㎡)</span></dd>
<dd><font>总收入：</font><span>${item.totalIncome || 0}万元</span></dd>
</dl>
<button type="button">更多</button>
</div>`;
VUE.infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
anchor: "top-center",
// content: createInfoWindow(title, content),
content,
offset: new AMap.Pixel(30, 70),
open: function(){
}
});
VUE.infoWindow.on('open',function(){ // 关闭信息框
document.getElementById("closeInfoWindowBtn").onclick = () => {
VUE.infoWindow.close();
};
})
// document.getElementById("closeInfoWindowBtn").onclick = () => {
// this.closeInfo();
// };
},
closeInfo() {
this.infoWindow.close();
},
sjzl() {
// 数据总览
request({
url: 'api/homePage/incubatorOverview?size=9',
method: 'get'
}) .then((res) => {
url: "api/homePage/incubatorOverview?size=9",
method: "get",
}).then((res) => {
this.sjzlList = res.body || [];
});
},
srph () { // 收入排行
srph() {
// 收入排行
request({
url: 'api/homePage/incubatorLeaderboard',
method: 'get'
}) .then((res) => {
url: "api/homePage/incubatorLeaderboard",
method: "get",
}).then((res) => {
const list = res.body || [];
var colors = [
"#ff8371",
"#08b2c0",
"#427fff",
"#8dbffa",
"#b2e2fe",
];
var colors = ["#ff8371", "#08b2c0", "#427fff", "#8dbffa", "#b2e2fe"];
var chartData = Highchart.formatSeriesList(list, {
value: "value",
colors: colors,
......@@ -210,14 +273,19 @@ export default {
},
isSeriesData: true,
};
Highchart.template.rich(document.querySelector('.srphWrapper'), list, opts);
Highchart.template.rich(
document.querySelector(".srphWrapper"),
list,
opts
);
});
},
qycxcysjfx () { //企业创新创业数据分析
qycxcysjfx() {
//企业创新创业数据分析
request({
url: 'api/homePage/enterpriseInnovationAnalysis',
method: 'get'
}) .then((res) => {
url: "api/homePage/enterpriseInnovationAnalysis",
method: "get",
}).then((res) => {
const list = res.body || [];
var colors = ["#0b50f5", "#00d1e6", "#0ce2a6", "#fdbe17"];
var seriesFormat = Highchart.formatSeriesList(list, {
......@@ -273,14 +341,19 @@ export default {
isSeriesData: true,
};
// Highchart.template.pie(wrap34, list, opts);
Highchart.template.rich(document.querySelector('.qycxcysjfxWrapper'), list, opts);
Highchart.template.rich(
document.querySelector(".qycxcysjfxWrapper"),
list,
opts
);
});
},
fhqfhqysjfx () { //孵化器孵化企业数据分析
fhqfhqysjfx() {
//孵化器孵化企业数据分析
request({
url: 'api/homePage/incubatorEnterpriseNumber',
method: 'get'
}) .then((res) => {
url: "api/homePage/incubatorEnterpriseNumber",
method: "get",
}).then((res) => {
const list = res.body || [];
var opts = {
chartConfig: {
......@@ -297,14 +370,19 @@ export default {
},
};
// Highchart.template.rich(wrap35, list, opts);
Highchart.template.rich(document.querySelector('.fhqfhqysjfxWrapper'), list, opts);
Highchart.template.rich(
document.querySelector(".fhqfhqysjfxWrapper"),
list,
opts
);
});
},
fhqyndsjsfbhqs () { //孵化企业年度上缴税费变化趋势
fhqyndsjsfbhqs() {
//孵化企业年度上缴税费变化趋势
request({
url: 'api/homePage/incubatorTaxTrend',
method: 'get'
}) .then((res) => {
url: "api/homePage/incubatorTaxTrend",
method: "get",
}).then((res) => {
let list = res.body || [];
list = {
names: [
......@@ -437,14 +515,19 @@ export default {
isSeriesData: true,
};
// Highchart.template.rich(wrap35, list, opts);
Highchart.template.rich(document.querySelector('.fhqyndsjsfbhqsWrapper'), list, opts);
Highchart.template.rich(
document.querySelector(".fhqyndsjsfbhqsWrapper"),
list,
opts
);
});
},
zfqyndsjsfbhqs () { // 在孵企业年度上缴税费变化趋势
zfqyndsjsfbhqs() {
// 在孵企业年度上缴税费变化趋势
request({
url: 'api/homePage/incubatorTaxTrend',
method: 'get'
}) .then((res) => {
url: "api/homePage/incubatorTaxTrend",
method: "get",
}).then((res) => {
let list = res.body || [];
list = {
names: [
......@@ -577,27 +660,62 @@ export default {
isSeriesData: true,
};
// Highchart.template.rich(wrap35, list, opts);
Highchart.template.rich(document.querySelector('.zfqyndsjsfbhqsWrapper'), list, opts);
Highchart.template.rich(
document.querySelector(".zfqyndsjsfbhqsWrapper"),
list,
opts
);
});
},
amapOptions(cmap){
amapOptions(cmap) {
var self = this;
var VUE = this;
return {
zoom:13,
center:[122.050189, 37.515189],
zoom: 13,
center: [122.050189, 37.515189],
//showLabel: true,
//pitch: 40,
onload: function(cmap){
console.log('onload ________________ ', self, cmap);
onload: function (cmap) {
console.log("onload ________________ ", self, cmap);
const form = {
longitude: 122.050189,
latitude: 37.515189,
};
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);
click: function (e, cmap) {
console.log("click ________________ ", cmap);
},
};
},
// 首页
module0(m, t, f, dmIndex, view) {
var self = this,
......@@ -690,9 +808,7 @@ export default {
// 孵化总收入排行榜
(m.reqSrph = function () {
m.srph().then(function (list) {
});
m.srph().then(function (list) {});
})();
// md4
......@@ -1421,6 +1537,11 @@ export default {
</script>
<style lang="scss" scope>
#container {
height: 100%;
width: 100%;
background-color: #29557a;
}
@font-face {
font-family: "diget year";
src: url("~@/assets/fonts/DS-Digital.ttf");
......@@ -1554,7 +1675,7 @@ export default {
justify-content: center;
pointer-events: none;
h2 {
font-size: 0.4rem;
font-size: 0.4534rem;
line-height: 1;
margin: 0.23rem 0 0 0rem;
font-weight: bold;
......@@ -2163,10 +2284,78 @@ export default {
/* 弹窗背景图 */
.popupBgImage {
color: #fff;
width: 3.86rem;
height: 3.66rem;
font-size: 0.12rem;
padding: 0.1rem;
background-image: url("/static/images/frame1.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: relative;
button {
width: 1.5rem;
height: 0.4rem;
background: #00d2ff;
border-radius: 0.04rem;
font-size: 0.19rem;
color: #fff;
border: none;
outline: none;
margin-left: 50%;
margin-top: 0.14rem;
transform: translateX(-50%);
cursor: pointer;
}
dl {
padding: 0 0.4rem;
}
dd {
margin-top: 0.08rem;
margin-bottom: 0.08rem;
}
dd > font {
// 标题
font-size: 0.19rem;
color: #00f0ff;
}
dd > span {
// 值
font-size: 0.19rem;
color: #fff;
}
i {
background-image: url("~@/assets/images/dpNew/close_icon.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
display: block;
width: 0.21rem;
height: 0.21rem;
position: absolute;
top: 0.21rem;
right: 0.21rem;
}
h4 {
width: 2.58rem;
height: 0.5rem;
text-align: center;
line-height: 0.5rem;
margin: 0 auto;
margin-top: 0.21rem;
// background: linear-gradient(90deg, rgba(4,205,255,0) 0%, rgba(4,205,255,0.98) 51%, rgba(4,205,255,0) 100%);
// opacity: 0.82;
font-family: SimHei;
font-weight: 400;
font-size: 0.24rem;
color: #ffffff;
background-image: url("~@/assets/images/dpNew/title2.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
}
}
/* 加载动画 */
......
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