本文主要是介绍地图标记（学习笔记），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
地图标记学习视频：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/
这篇关于地图标记（学习笔记）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
