如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
之前研究了定位,想用百度地圖,但是用百度地圖的
JavaScript API里面的瀏覽器定位根本不行,要用插件,很多人說本身帶的這個cordova-plugin-geolocation插件因為網絡問題,只有ios可以用,然后找到了專門針對安卓的cordova-qdc-baidu-location插件,但是這個插件不知道是不是我使用的問題,得到的數據可以彈出來,但是數據并不像這個插件所說的數據格式是
{
latitude : 緯度,
lontitude: 經度, ... }
這樣的,而是字符串,不是json字符串,弄了半天還是取不到里面的關于經緯度的值,然后發現了現在的這個定位插件cordova-plugin-baidumaplocation這個插件返回的數據格式是json的,可以直接獲取。
因為網絡配代理的原因,一直添加不上插件,今天才發現用cordova-plugin-baidumaplocation插件定位其實挺簡單的。
1.申請AK值。
地址:http://lbsyun.baidu.com/
需要申請兩個或者三個(配置ios),一個是js的,一個是android的(三個的話還有一個ios的,但是這邊直接只寫安卓的,其實ios是一樣的)
注:包名要一致
2.添加插件.
命令:
cordova plugin add cordova-plugin-baidumaplocation --variable ANDROID_KEY="<API_KEY_ANDROID>" --variable IOS_KEY="<API_KEY_IOS>"
注意:是沒有<>這種尖括號的。
到此為止準備工作基本上晚了,開始代碼部分:
1.引入百度地圖:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nLsK9qUii8uBZlkPAQUozAf9mR5xNVZF"></script>
這個引入是為了轉化經緯度為地址和顯示地圖。
2.在html頁面上寫兩個 標簽:
<button class="button" ng-click="getarea()">點擊我獲取地址百度</button> <div id='allmap' style=""></div>
div標簽是為了放地圖的。
3.js部分:
$scope.getarea=function(){ baidumap_location.getCurrentPosition(function (result) { var latitude=result.latitude; var lontitude=result.lontitude;
myaddr(lontitude,latitude);
}, function (error) { });
} function myaddr(lontitude,latitude){ var map = new BMap.Map("allmap"); var point = new BMap.Point(lontitude, latitude); map.centerAndZoom(point, 12); var marker = new BMap.Marker(point); map.addOverlay(marker); var geoc = new BMap.Geocoder();
geoc.getLocation(point, function(rs){ var addrmsg=rs.address; var opts = {
width : 200, height: 50, } var infoWindow = new BMap.InfoWindow("地址:"+addrmsg, opts); map.openInfoWindow(infoWindow,point); });
}
-
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
4.css部分:其實可以不要的,這是因為地圖中的地址顯示的窗口看起來有點問題,雖然改了依舊不好看,但是功能實現了。
.BMap_pop{ top: 70px !important; } .BMap_bubble_content{ width: 95% !important; } .BMap_center{ top: 26px !important; }
注:現在得到的地址是省市縣街道地址,想得到諸如:北京市朝陽區XX大廈附近這樣的地址的話還沒有研究,等研究出來了再補上。
藍藍設計( m.ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。