百度地图标记点中添加echarts图表

近日需要实现一个效果：在百度地图标记点的信息框中添加echarts图表。

大致已经实现，分享一下。

<!DOCTYPE html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<head><style type="text/css">  html{height:100%}    body{height:100%;margin:0px;padding:0px}    #container{height:100%}    </style>
</head>
<body><script src="js/echarts.js"></script><script src="js/jquery.min.js"></script><script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak(ak省略)"></script><div id="container"></div><script>var map = new BMap.Map("container"); var point = new BMap.Point(116.404125, 39.912196); map.centerAndZoom(point, 18);  //镜头中心点，地图大小map.enableScrollWheelZoom(true); //允许滚轮缩放地图var marker = new BMap.Marker(point);        // 创建标注  marker.addEventListener("mouseover",attribute);map.addOverlay(marker);        function attribute(){var opts = {    width : 500,     // 信息窗口宽度    height: 400,     // 信息窗口高度   }var sContent ="<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天安门</h4>"+"<table style=’width: 200px;margin-top: 10px;margin-left: 5px;float: left;’><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td><div id='main' style='width:400px;height:300px;'></div></td></tr></table>"var infoWindow = new BMap.InfoWindow(sContent, opts);  // 创建信息窗口对象 console.log("创建div"); map.openInfoWindow(infoWindow, point); //在point打的位置上进行一个标注  setTimeout(fun,1000);//延迟一秒，虽然是个笨方法，目的是在信息框创建完成后再创建图表，不然找不到目标id，echart初始化会失败,报错：Initialize failed: invalid dom.用ready比较好。}function fun(){var myChart1 = echarts.init(document.getElementById('main'));
console.log("如果找到id为main的div就会看到本条信息");
option = { //这个option是从echarts官网实例中搬过来的，自己的就不发了
xAxis: {
type: 'category',
boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
yAxis: { type: 'value' },
series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line', areaStyle: {} }] }; myChart1.setOption(option);}
</script>
</body>

百度地图标记点中添加echarts图表相关推荐

echarts地图上的标签为图片_百度地图标记点中添加Echarts图表
html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #container { height: 100% } v ...
JavaScript高德地图中绘制echarts图表随地图移动
JavaScript高德地图中绘制echarts图表随地图移动** 先上效果图实现方法如下: 使用高德地图"信息窗体",信息窗体AMap.InfoWindow的属性content ...
android百度地图覆盖物异步加载图片,Android 百度地图marker中图片不显示的解决方法(推荐)...
目的: 根据提供的多个经纬度,显示所在地的marker样式,如下: 问题: 1.发现marker中在线加载的图片无法显示出来: 2.获取多个对象后,却只显示出了一个marker: 以下为官网实现方法: ...
Android去掉百度地图sdk中卫星地图里的白色道路
最近开发一个APP,需要去掉百度地图sdk中的卫星地图里面的白色道路,没有去掉之前: 如上图各种白色道路割裂了卫星地图进行图层绘制的时候不太美观,于是就百度了如何去掉道路,并且也提交了工单询问百度地图 ...
vue 工程中加入 echarts 图表不显示的问题
vue 工程中加入 echarts 图表不显示的问题一.问题原因 vue 引用 echarts 方式错误,高版本采用了低版本的引用方式二.vue工程使用echarts vue官方教程 1. 安装 ...
Vue中使echarts图表自适应
Vue中使echarts图表自适应 1.先在main.js中自定义一个全局指令,如下 // 定义全局指令 Vue.directive('resize', { // 使用局部注册指令的方式// 指令的名 ...
ArcIMS 投影问题如何向地图配置文件中添加投影信息(转载)
ArcIMS 投影问题如何向地图配置文件中添加投影信息编号: 000181 相关产品及版本: ArcIMS 3.1, 4.0,9.0 平台: N/A 提交时间: 2004-12-15 修改时 ...
百度地图坐标转换为gps_百度地图与中交兴路合作，为大卡司机提供专业导航服务...
美股研究社消息,日前中交兴路旗下的车旺大卡APP宣布正式与百度地图达成合作,将联网617万辆重卡动静态数据以及车辆位置等多种数据,通过结合百度地图的全国实时路网数据和货车导航能力,共同为货车司机提供更 ...
百度地图聚合中的marker添加label后移动、放大缩小时label消失的问题download
最近在做百度地图相关的项目,由于要解决大批量点位渲染的问题,所以使用了聚合MarkerClusterer,但是在使用的过程中,碰到很多问题,例如如何获得已经聚合了的marker.给marker设置了l ...

百度地图标记点中添加echarts图表

百度地图标记点中添加echarts图表相关推荐

最新文章

热门文章