地图标记（学习笔记）

地图标记学习视频：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 locif (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/

地图标记（学习笔记）相关推荐

iOS学习笔记-地图MapKit入门
代码地址如下: http://www.demodashi.com/demo/11682.html 这篇文章还是翻译自raywenderlich,用Objective-C改写了代码.没有逐字翻译,如有错 ...
Python数据可视化——pyecharts学习笔记
导读:Python数据可视化的库有很多,常见的有matplotlib.pyplot.Seaborn.pyecharts等. pyecharts是一款将python与echarts相结合的数据可视化库, ...
PyTorch 学习笔记（六）：PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解发布: 2017年8月4日 7,195阅读 ...
容器云原生DevOps学习笔记——第三期：从零搭建CI/CD系统标准化交付流程
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
容器云原生DevOps学习笔记——第二期：如何快速高质量的应用容器化迁移
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
2020年Yann Lecun深度学习笔记（下）
2020年Yann Lecun深度学习笔记(下)
2020年Yann Lecun深度学习笔记（上）
2020年Yann Lecun深度学习笔记(上)
知识图谱学习笔记（1）
知识图谱学习笔记第一部分,包含RDF介绍,以及Jena RDF API使用知识图谱的基石:RDF RDF(Resource Description Framework),即资源描述框架,其本质是一个 ...
计算机基础知识第十讲,计算机文化基础（第十讲）学习笔记
计算机文化基础(第十讲)学习笔记采样和量化PictureElement Pixel(像素)(链接: 采样的实质就是要用多少点(这个点我们叫像素)来描述一张图像,比如,一幅420x570的图像,就表示 ...

地图标记（学习笔记）

地图标记（学习笔记）相关推荐

最新文章

热门文章