做頁面，地圖可能會用到
1 導入百度地圖的js庫
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=1.4&ak=&services=&t=20150522093217"></script>
2 頁面html相關標簽
<div class="form-group">
<label class="control-label">地址：</label>
<input class="form-control input-md" ng-blur="initBap()"name="address" ng-model="address"/>
</div>
<!-- 百度地圖顯示區域 -->
<div class="form-group" id="container" style="width: 100%;height: 500px;"></div>
在這里，我是用了一個離焦事件，這個可以因情而異，另外我是angulatjs框架
3 下面就是js部分
/**
* 初始化地址
*/
$scope.address = null;
/**
* 初始化經度
*/
$scope.longitude = 121.48;
/**
* 初始化緯度
*/
$scope.latitude= 31.22;
/**
* 初始化百度地圖
*/
$scope.initBap = function () {
$scope.map = new BMap.Map("container"); // 創建地圖實例
$scope.map.centerAndZoom(new BMap.Point($scope.longitude, $scope.latitude), 18); // 初始化地圖，設置中心點坐標和地圖級別
$scope.map.addControl(new BMap.NavigationControl());
$scope.map.addControl(new BMap.ScaleControl());
$scope.map.addControl(new BMap.OverviewMapControl());
$scope.map.enableScrollWheelZoom(true);
// 創建地址解析器實例
$scope.myGeo = new BMap.Geocoder();
/**
* 監聽地圖點擊事件，獲取點擊處建築物名稱
*/
$scope.map.addEventListener("click", function (e) {
var pt = e.point;
$scope.longitude = pt.lng;
$scope.latitude = pt.lat;
console.log( $scope.longitude+ "---"+$scope.latitude)
$scope.myGeo.getLocation(pt, function (rs) {
var addComp = rs.addressComponents;
/**
* 將獲取到的建築名賦值給$scope.address
*/
$scope.address = addComp.province != addComp.city ? addComp.province + addComp.city : addComp.city + addComp.district + addComp.street + addComp.streetNumber;
/**
* 通知angularjs更新視圖
*/
$scope.$digest();
});
});
/**
* 初始化查詢配置
* @type {BMap.LocalSearch}
*/
$scope.local = new BMap.LocalSearch($scope.map, {
renderOptions: {
map: $scope.map,
panel: "results",
autoViewport: true,
selectFirstResult: true
},
pageCapacity: 8
});
/**
* 監聽地址改變事件，當地址輸入框的值改變時
*/
$scope.$watch('address', function () {
/**
* 查詢輸入的地址並顯示在地圖上、調整地圖視野
*/
$scope.local.search($scope.address);
/**
* 將輸入的地址解析為經緯度
*/
$scope.myGeo.getPoint($scope.address, function (point) {
if (point) {
/**
* 將地址解析為經緯度並賦值給$scope.longitude和$scope.latitude
*/
$scope.longitude = point.lng;
$scope.latitude = point.lat;
}
});
});
};
4 以下為效果
可以點擊獲取經緯度