Skip to content

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

marker batch dynamic data

parent 83516382
Show whitespace changes
Inline Side-by-side
Showing with 80 additions and 38 deletions
src/views/Screen/index.vue
View file @ fce271ad
...@@ -164,63 +164,105 @@ export default { ...@@ -164,63 +164,105 @@ export default {
}); });
console.log(VUE.map, "map"); console.log(VUE.map, "map");
addMarker(); // addMarker();
var markers = [
{ 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} },
]
// var markers = [
// {
// icon: "/static/images/marker-dp.png",
// position: [116.481181, 39.989792],
// },
// {
// icon: "/static/images/marker-dp.png",
// position: [116.305467, 39.989799],
// },
// {
// icon: "/static/images/marker-dp.png",
// position: [116.305467, 39.807761],
// },
// ];
//添加marker标记 // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
function addMarker() { markers.forEach(function (item, index) {
VUE.map.clearMap();
var marker = new AMap.Marker({ var marker = new AMap.Marker({
map: VUE.map, map: VUE.map,
position: [116.481181, 39.989792], // position: [116.481181, 39.989792],
position: [item.position[0], item.position[1]],
icon: "/static/images/marker-dp.png", icon: "/static/images/marker-dp.png",
}); });
//鼠标点击marker弹出自定义的信息窗体 //鼠标点击marker弹出自定义的信息窗体
marker.on("click", function () { marker.on("click", function () {
VUE.infoWindow.open(VUE.map, marker.getPosition()); // VUE.infoWindow.open(VUE.map, marker.getPosition());
VUE.showInfoWindow(marker, item.extraData);
}); });
} });
// //添加marker标记
// function addMarker(marker) {
// // VUE.map.clearMap();
// var marker = new AMap.Marker({
// map: VUE.map,
// // position: [116.481181, 39.989792],
// position: [marker.position[0], marker.position[1]],
// icon: marker.icon,
// // icon: "/static/images/marker-dp.png",
// });
// // //鼠标点击marker弹出自定义的信息窗体
// marker.on("click", function () {
// VUE.infoWindow.open(VUE.map, marker.getPosition());
// });
// }
const item = {}; 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({ VUE.infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体 isCustom: true, //使用自定义窗体
anchor: "top-center", anchor: "top-center",
// content: createInfoWindow(title, content), // content: createInfoWindow(title, content),
content, // 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>`,
offset: new AMap.Pixel(30, 70), offset: new AMap.Pixel(30, 70),
open: function(){
}
}); });
VUE.infoWindow.on('open',function(){ // 关闭信息框 VUE.infoWindow.on("open", function () {
// 关闭信息框
document.getElementById("closeInfoWindowBtn").onclick = () => { document.getElementById("closeInfoWindowBtn").onclick = () => {
VUE.infoWindow.close(); VUE.infoWindow.close();
}; };
});
})
// document.getElementById("closeInfoWindowBtn").onclick = () => {
// this.closeInfo();
// };
}, },
closeInfo() { showInfoWindow(marker, item) {
this.infoWindow.close(); const 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" id="goMoreBtn">更多</button>
</div>`;
this.infoWindow.setContent(content);
this.infoWindow.open(this.map, marker.getPosition());
}, },
sjzl() { sjzl() {
// 数据总览 // 数据总览
request({ request({
......
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