-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathexample.html
More file actions
110 lines (109 loc) · 2.36 KB
/
Copy pathexample.html
File metadata and controls
110 lines (109 loc) · 2.36 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
body{
padding-top: 80px;
}
#add-btn{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<form class="form-horizontal">
<input id="place-input" type="text" class="form-control" placeholder="请输入地址"></input>
<button type="button" id="search-btn" class="btn btn-success" style="margin-top: 40px;">查询</button>
</form>
</div>
<div class="col-md-6">
<div id="main" style="height: 500px;"></div>
</div>
</div>
</div>
</body>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/echarts/dist/echarts.min.js"></script>
<script src="./node_modules/echarts/map/js/china.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var ak = "fHrNQj6DHTjZtfTvfqbsuvTzKc5V9SBl";
var url = "http://api.map.baidu.com/geocoder/v2/?output=json&ak="+ ak +"&address="
var ePlaceInput = $("#place-input");
var eSearchBtn = $("#search-btn");
var chartData = []
eSearchBtn.click(function () {
var place = ePlaceInput.val()
if (place) {
$.getJSON(url + place+'&callback=?',function(res){
if (res.status === 0) {
chartData.push({
name:place,
value: [res.result.location.lng,res.result.location.lat]
})
console.log(place,res.result)
drawMap(place)
}else{
alert("no message")
}
})
}
})
function drawMap(name,loc) {
var option = {
backgroundColor: "#404a59",
title: {
text: '地址搜索',
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: '#32c48',
borderColor: '#111'
},
emphasis: {
areaColor: "#2a333d"
}
}
},
series: [{
name: '地址',
type: 'scatter',
coordinateSystem: 'geo',
data: chartData,
symbolSize: function(val){
return 10;
}
}]
}
myChart.setOption(option)
}
</script>
</html>