博客

山东大学项目实训（六）点击事件展示折线图

  • Post author:
  • Post category:其他


将多个点添加点击事件与绘制折线堆叠图相结合，点击地图上的点后，展示相关信息并显示折线堆叠图。对标记点的相关代码进行了修改，并增加了绘制折线堆叠图的代码，这段代码是在点击事件之后运行的，否则会报错Uncaught Error: Initialize failed: invalid dom.

在这里插入图片描述

之前代码： 

var opts = {
   
    width: 200,
    height: 100,
	title: markerArr[i].title,
};
var p0 = markerArr[i].point.split(",")[0]; 
var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
point[i] = new window.BMapGL.Point(p0, p1); //循环生成新的地图点
marker[i] = new window.BMapGL.Marker(point[i]); //按照地图点坐标生成标记

map.addOverlay(marker[i]);

infoWindow[i] = new BMapGL.InfoWindow(markerArr[i].address,opts);

修改后代码： 

var opts = {
   
    width: 320,
    height: 200,
	title: markerArr[i].title,
};
var p0 = markerArr[i].point.split(",")[0]; //
var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
point[i] = new window.BMapGL.Point(p0, p1); //循环生成新的地图点
marker[i] = new window.BMapGL.Marker(point[i]); //按照地图点坐标生成标记

//给每个地图点附上一个唯一id的div
var sContent = `<div id="main-picture`+i+`" style="width: 300px;height:200px;"></div>`
map.addOverlay(marker[i]);

infoWindow[i] = new BMapGL.InfoWindow(sContent,opts);

效果展示：

在这里插入图片描述

在这里插入图片描述

源代码展示： 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset=&#


版权声明：本文为weixin_47933850原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。