Echarts3.0 引入百度地圖(轉載)

時間 2019-12-01

標籤 echarts3.0 echarts 引入百度地圖轉載简体版

原文原文鏈接

轉載來源: https://blog.csdn.net/yc_1993/article/details/52431989javascript

Echarts3.0引入百度地圖

update:
因爲目前echarts3.8.X比以前舊版改動較多，其實地圖實例處許多朋友留言跑不通，今天更新下新版的作法，親測已經能夠。php

perface
一直抽不開身，留言區以及很多朋友都在問如何在Echarts3.0裏引入百度地圖，因爲以前寫的是Echart2.0如何引入，但2.0目前已再也不更新，因此這段時間斷斷續續研究了下，跟你們分享。
Echarts3.0採用標籤引入，其相對而言比2.0的模塊化引入更容易上手和配置。css

下面針對的是Echarts3.8.4（舊版的3.2.x之前版本再也不支持該作法），其下載地址爲：http://echarts.baidu.com/download.html，測試儘可能選擇源代碼版本html

1. 首先還是百度AK的申請，請參考可視化篇：Echarts2.0引入百度地圖中的指引，或者直接用博主的密鑰也能夠（PS：公司儘可能本身申請同時增長配額）。

2. 下載bmap.js

bmap.js 是一個基於echart3的百度地圖擴展文件，將其引入後能夠在echarts.series.map.coordinateSystem 中直接使用參數’bmap’
下載地址爲：https://github.com/ecomfe/echarts ，GitHub上echarts源代碼中路徑爲 dist/extension/bmap.min.js，舊版百度網盤版本再也不支持該版本~~（ http://pan.baidu.com/s/1hrPEdGK ）~~java

3. 引入echarts.js 、bmap.js 以及AK

update:
引入的同時爲echarts也新建了個容器：

<html> <head> <meta charset="utf-8"> <style type="text/css"> body { margin: 0; } #main { height: 100%; } </style> </head> <body> <div id="main"></div> <script src="http://api.map.baidu.com/api?v=2.0&ak=53oVIOgmSIejwV7EfphPgTynOZbIiVYu"></script> <script src="./echarts/echarts.js"></script> <script src="./js/bmap.min.js"></script> <script src="./js/example.js"></script> </body> </html>

其中example.js爲echarts測試樣例，以下：

var myChart = echarts.init(document.getElementById('main')); myChart.setOption({
 bmap: { //設置百度地圖顯示哪些東西 center: [120.13066322374, 30.240018034923], zoom: 14, roam: true, mapStyle: { styleJson: [ { 'featureType': 'land', //調整土地顏色 'elementType': 'geometry', 'stylers': { 'color': '#081734' } }, { 'featureType': 'building', //調整建築物顏色 'elementType': 'geometry', 'stylers': { 'color': '#04406F' } }, { 'featureType': 'building', //調整建築物標籤是否可視 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'highway', //調整高速道路顏色 'elementType': 'geometry', 'stylers': { 'color': '#015B99' } }, { 'featureType': 'highway', //調整高速名字是否可視 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'arterial', //調整一些幹道顏色 'elementType': 'geometry', 'stylers': { 'color':'#003051' } }, { 'featureType': 'arterial', 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'green', 'elementType': 'geometry', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'water', 'elementType': 'geometry', 'stylers': { 'color': '#044161' } }, { 'featureType': 'subway', //調整地鐵顏色 'elementType': 'geometry.stroke', 'stylers': { 'color': '#003051' } }, { 'featureType': 'subway', 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'railway', 'elementType': 'geometry', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'railway', 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'all', //調整全部的標籤的邊緣顏色 'elementType': 'labels.text.stroke', 'stylers': { 'color': '#313131' } }, { 'featureType': 'all', //調整全部標籤的填充顏色 'elementType': 'labels.text.fill', 'stylers': { 'color': '#FFFFFF' } }, { 'featureType': 'manmade', 'elementType': 'geometry', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'manmade', 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'local', 'elementType': 'geometry', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'local', 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'subway', 'elementType': 'geometry', 'stylers': { 'lightness': -65 } }, { 'featureType': 'railway', 'elementType': 'all', 'stylers': { 'lightness': -40 } }, { 'featureType': 'boundary', 'elementType': 'geometry', 'stylers': { 'color': '#8b8787', 'weight': '1', 'lightness': -29 } }] } }, series: [{ type: 'scatter', coordinateSystem: 'bmap',//設置爲bmap data: [ [120, 30, 1] ] }] });

var bmap = myChart.getModel().getComponent('bmap').getBMap(); 
bmap.addControl(new BMap.MapTypeControl());

其中series.map中，咱們就能夠直接把coordinateSystem設置爲bmap了，如此3就算引入成功了（是否是感受很簡單？）。 
update: 此處新版須要加入最後bmap的實例化語句，但願能夠幫到你們。

效果以下：
git

//可能問題

1） 個人echarts3某個版本寫這兩行代碼反而報錯，刪除仍然能夠正常運行，可能有版本問題。

var bmap = myChart.getModel().getComponent('bmap').getBMap(); 
  bmap.addControl(new BMap.MapTypeControl());

2）map類型和百度地圖沒法互動

type: 'map', //類型爲map
       coordinateSystem: 'bmap',//此時會報錯，查看文檔發現 map類型無此配置。 刪除後發現map類型和百度地圖沒法互動，例如拖拽和放大不能同步。
       目前還沒有找到map和百度地圖共用的案例，建議
       1更新到最高版本試試（ehcarts 和bmap）；
       2查看百度地圖api；
       3 採用替代方案。
       百度地圖說明文檔      http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey

相似案例 http://www.mamicode.com/info-detail-2244331.html
一個問題 https://www.oschina.net/question/2305015_220916  網盤：http://pan.baidu.com/s/1gdybVGZ

全國省市json文件 https://www.cnblogs.com/carsonwuu/p/8566621.html   Github： https://github.com/carsonWuu/echartJs/tree/master/ECharts_%E5%9C%B0%E5%9B%BE

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

Echarts3.0 引入百度地圖(轉載)

Echarts3.0引入百度地圖

1. 首先還是百度AK的申請，請參考 可視化篇：Echarts2.0引入百度地圖 中的指引，或者直接用博主的密鑰也能夠（PS：公司儘可能本身申請同時增長配額）。

2. 下載bmap.js

3. 引入echarts.js 、bmap.js 以及AK

1. 首先還是百度AK的申請，請參考可視化篇：Echarts2.0引入百度地圖中的指引，或者直接用博主的密鑰也能夠（PS：公司儘可能本身申請同時增長配額）。