当前位置: 首页 » 前端开发 » 移动端经验分享:百度地图定位
 |  全屏浏览  |  字号调整:

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

haibao 2016-03-03 14:44:01 前端开发 0 0 1.32 k 百度已收录
本文最后更新于2016-03-03,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!
历史上的今天:11月21日,世界问候日 - 1992年,厄瓜多尔发生海豚集体自杀事件

周三凌晨好, 本文除去代码部分,共3120个字,预计阅读时间需要8分钟。

开场白省略…

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

言归正传,由于项目需要,于是我用了百度地图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

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

文章编辑:haibao 发布于:2016-03-03 14:44:01

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

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

版权声明:本博客所有文章除特别声明外,均采用 署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!


发表评论

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

切换注册

登录

忘记密码 ?

切换登录

注册