您的位置：首页 > 其它

地图标记（学习笔记）

2017-02-22 17:49 141 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： echart 地图 canvas

相关文章推荐

新的分享

章节导航