移动端经验分享:百度地图定位

haibao 笔记 2016-03-03 14:44 773
想象力比知识更重要! 因为知识是有限的, 而想象力概括着世界的一切, 推动着进步, 并且是知识进化的源泉。——爱因斯坦

开场白省略…

算了,还是吐槽两句吧,最近几乎天天晚上加班到很晚,很多天没陪父母吃晚饭了!!哎

言归正传,由于项目需要,于是我用了百度地图API做了定位的相关功能,如下图:

相关代码如下【这里给到的只是demo部分,具体逻辑自行实现吧】:

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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!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%;overflow:hidden;margin:0;font-family:"微软雅黑";font-size:14px;}
		ul,p{margin:0;padding:0;}
		li{list-style:none;}
		#allmap{width:100%;height:52%;} 
		#search{width:90%;height:45px;padding:0 5%;background-color:rgba(0,0,0,.6);text-align:center;position:fixed;top:0;left:0;z-index:99;}
		#search_ipt{width:90%;height:35px;line-height:35px;margin-top:5px;padding:0 5%;border:1px solid #999;border-radius:4px;}
		#result_list{width:100%;height:30%;overflow-y:auto;background-color:#fff;display:none;position:absolute;top:45px;left:0;z-index:99;}
		#position_list{width:100%;height:48%;overflow-y:auto;background-color:#fff;position:fixed;bottom:0;left:0;z-index:999;}
		#position_list ul{width:100%;}
		#position_list li,#result_list li{width:90%;padding:6px 5%;border-bottom:1px solid #ccc;}
		#position_list p:last-child,#result_list p:last-child{color:#999;font-size:12px;margin-top:3px;}
	</style>
	<title>地图 DEMO</title>
</head>
<body>
	<!--搜索-->
	<div id="search">
		<input type="text" id="search_ipt" value="" placeholder="请输入小区、大厦、学校等"/>
	</div>
 
	<!--搜索结果-->
	<ul id="result_list"></ul>
 
	<!--地图容器-->
	<div id="allmap"></div>
 
	<!--地址列表-->
	<div id="position_list">
		<ul>
			<li>
				<p id="current_pos1">正在定位中...</p>
				<p id="current_pos2">请稍候..</p>
			</li>
		</ul>
		<ul id="suggestion"></ul>
	</div>
</body>
</html>
<!--js-->
<script type="text/javascript">
	//百度地图API功能
	function loadJScript() {
		var script = document.createElement("script");
		script.type = "text/javascript";
		script.src = "http://api.map.baidu.com/api?v=2.0&ak=GnsmqjbiV3sa6Th9Gcd5g0bo&callback=init"; //ak需公司提供,目前是个人的
		document.body.appendChild(script);
	}
	function init() {
		var map = new BMap.Map("allmap"); // 创建Map实例
		var geoc = new BMap.Geocoder();  
		map.centerAndZoom("苏州",8); // 初始化地图,用城市名设置地图中心点      
 
		var geolocation = new BMap.Geolocation();
		geolocation.getCurrentPosition(function(r){
			if(this.getStatus() == BMAP_STATUS_SUCCESS){
				map.panTo(r.point); //移动到当前定位地址
				document.getElementById('current_pos1').innerText = '当前位置:'+ r.address.province + r.address.city + r.address.district; //更新当前定位地址
 
				//逆地址解析
				geoc.getLocation(r.point, function(rs){
					var addComp = rs.addressComponents;
					var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
					document.getElementById('current_pos2').innerText = address;
 
					//根据解析出来的地址 搜索
					var options = {
						onSearchComplete: function(results){
							// 判断状态是否正确
							if (local.getStatus() == BMAP_STATUS_SUCCESS){
								var suggestion = document.getElementById("suggestion"), tpl_ = '';
								for (var i = 0; i < results.getCurrentNumPois(); i ++){
									tpl_ += '<li data-lat="'+results.wr[i].point.lat+'" data-lng="'+results.wr[i].point.lng+'"><p>'+results.getPoi(i).title + "</p><p>" + results.getPoi(i).address+'</p></li>';
								}
								suggestion.innerHTML = tpl_;
 
								//点击地址 移动到相应位置
								var list = suggestion.getElementsByTagName("li");
					            var moveToPlace = function(i){
				                    list[i].onclick = function(){
				                        var lat = this.getAttributeNode('data-lat').value, lng = this.getAttributeNode('data-lng').value;
 
				                        var map2 = new BMap.Map("allmap"); // 创建Map实例
				                        var pt2 = new BMap.Point(lng, lat);
				                        map2.centerAndZoom(pt2, 18); 
										//var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300,157)); // 设置新标注图标
										//var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
										var marker2 = new BMap.Marker(pt2);  // 创建标注
										map2.addEventListener("tilesloaded",function(){
											map2.clearOverlays(); // 清除标注
											map2.addOverlay(marker2);  // 将标注添加到地图中
											map2.panTo(pt2); // 移动到相应位置
											map2.addControl(new BMap.NavigationControl());  // 添加平移缩放控件
											map2.enableScrollWheelZoom(true);  //启用滚轮放大缩小
										});
				                    }
				                }
				                for(var i=0; i<list.length; i++){
				                    moveToPlace(i);
				                }
							}
						}
					};
					var local = new BMap.LocalSearch(map, options);
					local.search(address);
				});
 
				var pt = new BMap.Point(r.point.lng, r.point.lat);
				map.centerAndZoom(pt,18); 
				var marker = new BMap.Marker(pt);  // 创建标注
 
				map.addEventListener("tilesloaded",function(){
					map.addOverlay(marker);  // 将标注添加到地图中
					map.addControl(new BMap.NavigationControl());  // 添加平移缩放控件
					map.enableScrollWheelZoom(true);  //启用滚轮放大缩小
				});
			}else {
				alert('sorry! failed'+this.getStatus());
				document.getElementById('current_pos1').innerText = '定位失败!';
				document.getElementById('current_pos2').innerText = '';
			}        
		},function(error){
                    switch (error.code) {
                case error.PERMISSION_DENIED:
                    alert("您拒绝了使用位置共享服务,查询已取消", 3000);
                break;
                case error.POSITION_UNAVAILABLE:
                    alert("地理位置获取失败", 3000);
                break;
                case error.TIMEOUT:
                    alert("地理位置获取超时,请重试", 3000);
                break;
                case error.UNKNOWN_ERROR:
                    alert("地理位置获取失败", 3000);
                break;
            }
                }, {enableHighAccuracy: true, timeout: 15000});
 
		//根据解析出来的地址 搜索
		document.getElementById('search_ipt').onkeyup = function(){
			var search_txt = this.value, result_list = document.getElementById("result_list");
			var options = {
				onSearchComplete: function(results){
					// 判断状态是否正确
					if (local.getStatus() == BMAP_STATUS_SUCCESS){
						var tpl_ = '';
						for (var i = 0; i < results.wr.length; i ++){
							tpl_ += '<li data-lat="'+results.wr[i].point.lat+'" data-lng="'+results.wr[i].point.lng+'"><p>'+results.wr[i].title+"</p><p>"+results.wr[i].address+'</p></li>';
						}
						result_list.innerHTML = tpl_;
						result_list.style.display = 'block';
					}
				}
			};
			var local = new BMap.LocalSearch(map, options);
			if(search_txt.length > 1){
				local.search(search_txt);
			}else{
				result_list.style.display = 'none';
			}
		}
	}  
	window.onload = loadJScript;  //异步加载地图
</script>

参考文档:http://lbsyun.baidu.com/index.php?title=jspopular

好了,本篇虽短,但确实结束了…

本文标题:移动端经验分享:百度地图定位

本文地址:http://www.hehaibao.com/baidu-map/

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>