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

MeditationRain

已于 2022-05-31 19:08:36 修改

阅读量185

点赞数

分类专栏：山东大学项目实训文章标签： javascript html

于 2022-05-27 08:55:42 首次发布

本文链接：https://blog.csdn.net/weixin_47933850/article/details/124996895

版权

将多个点添加点击事件与绘制折线堆叠图相结合，点击地图上的点后，展示相关信息并显示折线堆叠图。对标记点的相关代码进行了修改，并增加了绘制折线堆叠图的代码，这段代码是在点击事件之后运行的，否则会报错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=&#

最低0.47元/天解锁文章

MeditationRain

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
山东大学项目实训（六）点击事件展示折线图

将多个点添加点击事件与绘制折线堆叠图相结合，点击地图上的点后，展示相关信息并显示折线堆叠图。对标记点的相关代码进行了修改，并增加了绘制折线堆叠图的代码，这段代码是在点击事件之后运行的，否则会报错Uncaught Error: Initialize failed: invalid dom.之前代码：var opts = { width: 200, height: 100, title: markerArr[i].title,};var p0 = markerArr[i].point
复制链接

扫一扫