使用echarts百度地图个性定制不生效

最近用vue写个地图页面，使用echarts百度地图个性定制不生效
首先导入js

// 使用基础的百度地图
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
// 使用
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak={{申请的AK}}" ></script>

ak的申请到百度官方网站
创建应用后就会给ak

vue代码展示

<template><div class="firstdiv"><div :id="box_id" style="width: 100%; height: 100%" :ref="box_id"></div></div>
</template><script>
import echarts from "echarts";
import "echarts/map/js/world.js";
import "echarts/map/js/china.js"; // 引入中国地图数据
import "echarts/extension/bmap/bmap";
import goodsData from "../assets/custom_map_config.json";export default {name: "Usermap",data() {return {bmap: {},box_id: "container",center_point: [102.897509, 30.738321],zoom: 8,roam: true,iconsize: 15,icon_color: "#e27228",data: [{lat: 31.132889,lng: 104.36794427,name: "1",value: "6",},{lat: 30.655822,lng: 104.071534,name: "2",value: "8",},{lat: 29.63,lng: 106.51,name: "3",value: "7",},{lat: 24.84,lng: 101.71,name: "4",value: "12",},],};},methods: {baiduMap() {var myChart = echarts.init(document.getElementById("container"));var option = null;var data = this.data;var convertData = function (data, type) {var res = [];for (var i = 0; i < data.length; i++) {res.push({name: data[i].name,value0: data[i].value,value: [data[i].lng, data[i].lat, type],});}return res;};option = {tooltip: {show: true,trigger: "item",formatter: (params) => {var res = params.name + "<br/>";var myseries = option.series;for (var i = 0; i < myseries.length; i++) {for (var j = 0; j < myseries[i].data.length; j++) {if (myseries[i].data[j].name == params.name) {res += "" + "  " + myseries[i].data[j].value0 + "</br>";}}}return res;},},bmap: {center: this.center_point,zoom: this.zoom,roam: this.roam,// 在这里设置个性化的json一值不管用奇怪// mapStyle: {//   styleJson: goodsData,// },},series: [{name: "name",type: "scatter",stack: "name",coordinateSystem: "bmap",data: convertData(data, 1),symbolSize: this.iconsize,encode: {value: 2,},itemStyle: {color: this.icon_color,background: this.icon_color,},},],};if (option && typeof option === "object") {myChart.setOption(option, true);}window.onresize = function () {myChart.resize();};// 不能在里面设置只能在外面设置了var bmap = myChart.getModel().getComponent("bmap").getBMap();// bmap.setMapStyle({ style: "grassgreen" });bmap.setMapStyle({ styleJson: goodsData, });// 设置最小缩放值// bmap.setMinZoom(13);// 设置最大缩放值// bmap.setMaxZoom(15);// bmap.setMapStyleV2({//   styleId: "ce8b822124dc6e5b25e2900948ad4269",// });// 缩放结束后的事件bmap.addEventListener("zoomend", function () {// 打印出当前缩放值console.log("当前缩放值", bmap.getZoom());});},},mounted() {this.baiduMap();},
};
</script>

使用echarts百度地图个性定制不生效相关推荐

Vue+Echarts+百度地图小例子
刚学完Echarts后,看到一些官方例子,粘贴代码下来却实现不了相应的效果,经过一番了解,发现还要引入百度地图,记录详细过程如下. 1.安装echarts(使用3.x,4.x) npm install ...
openlayers加载百度地图一——定制百度地图
在开发中,我们常常会用到一些炫酷的地图,尤其是一些大屏项目,其实就是自定义地图. 国内的自定义地图服务有 ①高德自定义地图, ②百度自定义地图, ③百度地图个性在线编辑器. 国外的有mapbox的④m ...
地图统计_博客城市访问量统计并且通过Echarts+百度地图展示
本篇讲解一下如何在Vue 中使用 Echarts + 百度地图统计博客访问量并且通过QQWry 解析 ip 地址利用Echarts 展示出来效果图如下: 1.纯真Ip地址库 QQWry 这 ...
基于ECharts+百度地图开发散点扩散图
基于ECharts+百度地图开发散点扩散图用ECharts和百度地图,开发散点扩散图,显示TOP5的点. 1.引入Echarts3.2.3 js文件下载地址为:http://echarts.bai ...
数据视化Echarts+百度地图API实现市县区级下钻
开始这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...
基于Echarts+百度地图+Three.js的数据可视化系统
上周重构项目数据统计部分写了几篇echarts相关的文章,重构的后台前端框架改用Vue,关于Vue中引用Echarts及可能遇到的问题的文章如下所示: VUE中使用Echarts图表 VUE父组件异步 ...
vue全家桶+Echarts+百度地图，搭建数据可视化系统（项目）
vue全家桶+Echarts+百度地图,搭建数据可视化系统 1. 前言 1.1 业务场景突然接到产品说要做一个数据监控的系统.有线图.柱状图.地图,类似于数据可视化的方式. 本人之前从未接触过Ech ...
Vue+Echarts+百度地图API
Vue+Echarts+百度地图API 不容易啊,又注册了一个地图账户使用npm安装方式去百度地图官网申请key,也就是地图API密钥AK 在vue项目的public文件夹中的index.html ...
ECharts百度地图BMap禁用地图导航
在开发ECharts百度地图时,不需要显示百度地图自带的点击位置后的信息弹窗,如下图: 查看ECharts官方文档没找到在ECharts配置中能够禁止该配置,但是百度地图api中有一项MapOptio ...

使用echarts百度地图个性定制不生效

使用echarts百度地图个性定制不生效相关推荐

最新文章

热门文章