当前位置:

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

本文最后更新于2016-03-03,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!

温馨提示:本文共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

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

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

我要说两句