-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
101 lines (79 loc) · 2.46 KB
/
demo.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
<!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;font-family:"微软雅黑";}
#allmap {width:50%;height:50%;}
p{margin-left:5px; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=key"></script>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<title>地址解析</title>
</head>
<body>
<div id="allmap"></div>
<input type="text" name="" id="content"> <input type="button" onclick="searchLocation()" value="搜索"><br>
<input type="text" name="" id="point" style="width:500px;">
</body>
</html>
<script type="text/javascript">
//初始化
var map = new BMap.Map("allmap");
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint("北京市水立方", function(point){
if (point) {
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
consolePoint(point);
}else{
alert("您输入的地址没有查询到结果，请正确输入省市名称!");
}
}, "");
//绑定点击事件
map.addEventListener("click", showInfo);
/**
* 添加新的标注点
* @param e
*/
function showInfo(e){
map.clearOverlays();
//alert(e.point.lng + ", " + e.point.lat);
var marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat)); // 创建点
map.addOverlay(marker);
consolePoint(e.point);
}
/**
* 提供地图缩放
*/
setTimeout(function(){
map.setZoom(14);
}, 2000); //2秒后放大到14级
map.enableScrollWheelZoom(true);
/**
* 输入搜索内容
*/
function searchLocation(){
var searchContent = $("#content").val();
myGeo.getPoint(searchContent, function(point){
if (point) {
map.clearOverlays();
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
consolePoint(point);
}else{
alert("您选择地址没有解析到结果!");
}
}, "");
}
/**
* 显示经纬度
* @param pointData
*/
function consolePoint(pointData) {
$("#point").val('当前地点经纬度为：' + pointData.lng + ',' + pointData.lat);
}
</script>