地圖示記（學習筆記）
阿新 • • 發佈：2019-02-20
地圖示記學習視訊：http://www.imooc.com/learn/687
Demo和學習筆記
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Echarts</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <style> body{ padding-top:80px } #search-btn{ margin-top: 20px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3 col-md-offset-3"> <form class="form-horizontal"> <input id="place-input" type="text" class="form-control" value="天津" placeholder="請輸入地址"> <button type="button" id="search-btn" class="btn btn-success"> 查詢 </button> </form> </div> <div class="col-md-6"> <div id="main" style="height:500px;"></div> </div> </div> </div> <script src='js/jquery.js'></script> <script src='js/echarts.min.js'></script> <script src='js/china.js'></script> <script> // 百度地圖的開發者祕鑰 var token = 'clR7lmWlaguV9WUYKM7OGMbj' //拼寫URL var url = 'http://api.map.baidu.com/geocoder/v2/?output=json&ak=' + token + '&address=' //獲取控制元件 var ePlaceInput = $('#place-input') var eSearchBtn = $('#search-btn') //初始化圖表 var myChart = echarts.init(document.getElementById('main')) var chartData = [] //點選事件 eSearchBtn.click(function() { var place = ePlaceInput.val() if (place) { $.getJSON(url + place + '&callback=?', function(res) { var loc if (res.status === 0) { loc = res.result.location //將獲取的經緯度放入陣列中 chartData.push({ name: name, value: [loc.lng, loc.lat] }) drawMap(place) }else{ alert('百度沒有找到地址資訊') } }) } }) //描繪圖表 function drawMap(name) { var option = { backgroundColor: '#404a59', title: { text: '2017想要去的地方', left: 'center', textStyle: { color: '#fff' } }, tooltip: { trigger: 'item' }, toolbox: { show: true, feature: { saveAsImage: { show: true } } }, geo: { map: 'china', label: { emphasis: { show: false } }, roam: true, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#111' }, emphasis: { areaColor: '#2a333d' } } }, series: [{ name: '地址', type: 'scatter', coordinateSystem: 'geo', data: chartData, symbolSize: function(val) { return 10; }, }] } myChart.setOption(option) } </script> </body> </html>
總結
Echarts圖表下載：http://echarts.baidu.com/
百度地圖介面API：http://lbsyun.baidu.com/
Bootstrap中文網：http://www.bootcss.com/