-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path百度地图api.html
132 lines (131 loc) · 3.83 KB
/
百度地图api.html
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{
width: 100%;
height: 100%;
margin:0 auto;
font-family:"微软雅黑";
}
#l-map{
margin:40px 550px 90px 570px;
height:500px;
width:800px;
border:3px solid grey;
}
#r-result{
font-size: 30px;
width:100%;
text-align: center;
padding: 20px;
}
#suggestId{
font-size: 30px;
width:450px;
}
#searchResultPanel{
border:1px solid #C0C0C0;
width:150px;
height:auto;
display:none;
}
.xy{
height: 200px;
text-align: center;
font-size: 50px;
background-color: cornflowerblue;
color: white;
line-height: 200px;
}
.anchorBL{
display:none;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=g0kiqzKES8RdrPxEqtY431Xp94PDRkOw"></script>
<title>关键字输入提示词条</title>
</head>
<body>
<div id="r-result">请输入:
<input id="suggestId" type="text" value="百度" />
</div>
<div id="l-map"></div>
<div id="searchResultPanel" ></div>
<div class="xy">
<p class="t" id="p1"></p>
</div>
</body>
</html>
<script type="text/javascript">// 百度地图API功能
var map = new BMap.Map("l-map");
map.centerAndZoom("成都",12); // 初始化地图,设置城市和地图级别。
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
{"input" : "suggestId"
,"location" : map
});
var myValue;
function G(id) {
return document.getElementById(id);
}
ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
setPlace();
});
ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
var str = "";
var _value = e.fromitem.value;
var value = "";
if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
G("searchResultPanel").innerHTML = str;
});
function setPlace(){
map.clearOverlays(); //清除地图上所有覆盖物
function myFun(){
var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
console.log(pp);
document.getElementById("p1").innerHTML="当前选中位置: 纬度:"+pp.lat+"° 经度:"+pp.lng+"° ";
map.centerAndZoom(pp, 18);
map.addOverlay(new BMap.Marker(pp)); //添加标注
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);
}
function cheak(x,y){
var map = new BMap.Map("l-map");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
}
// window.onload=function(){
// var map = new BMap.Map("l-map");
// var point = new BMap.Point(116.331398,39.897445);
// map.centerAndZoom(point,12);
// var geolocation = new BMap.Geolocation();// 开启SDK辅助定位
// geolocation.enableSDKLocation();
// geolocation.getCurrentPosition(function(r){
// if(this.getStatus() == BMAP_STATUS_SUCCESS){
// var mk = new BMap.Marker(r.point);
// map.addOverlay(mk);
// map.panTo(r.point);
// alert('您的位置：'+r.point.lng+','+r.point.lat);
// }
// else {
// alert('failed'+this.getStatus());
// }
// })
// }
</script>