百度地图的js导入及使用

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

做页面，地图可能会用到

1 导入百度地图的js库

2 页面html相关标签

在这里，我是用了一个离焦事件，这个可以因情而异，另外我是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;
}
});
});
};