代码语言：javascript复制
app.controller('mapSignController',function($scope,$rootScope,Message, $window,$uibModalInstance){
var script = document.createElement("script");
script.src = 'http://api.map.baidu.com/api?v=2.0&ak=自己的ak&callback=baiduMapLoaded';
document.body.appendChild(script);
$window.baiduMapLoaded = function () {
// 实例化一个地图
$scope.mapObj = new BMap.Map(document.getElementById("map-container"));
// 鼠标双击地图时会触发此事件
$scope.mapObj.addEventListener('dblclick', function(event) {
var pt = event.point;
// 移除之前的标注
if ($scope.mapNewMarker) {
$scope.mapObj.removeOverlay($scope.mapNewMarker);
}
var myIcon = new BMap.Icon("https://img.yuanmabao.com/zijie/pic/2022/02/09/t3ountkpxoh.png",
new BMap.Size(19, 25), {
offset: new BMap.Size(0, 0),
imageOffset: new BMap.Size(0, -250)
});
$scope.mapNewMarker = new BMap.Marker(pt, { icon: myIcon });
$scope.mapObj.addOverlay($scope.mapNewMarker);
$scope.mapNewMarker.enableDragging();
var mapGeoc = new BMap.Geocoder();
$scope.mapNewMarker.addEventListener("click", function(event) {
mapGeoc.getLocation(event.target.point, function(rs) {
var address = rs.address;
console.log(event.target.point);
console.log(rs);
});
});
mapGeoc.getLocation(pt, function(rs) {
var address = rs.address;
console.log(rs);
$scope.addressInfo.lat = rs.point['lat'];
$scope.addressInfo.lng = rs.point['lng'];
$scope.addressInfo.searchAddr = address;
});
});
//定义一个控件类
function ResourceMapControl(){
}
ResourceMapControl.prototype = new BMap.Control();
$scope.mapObj.addControl(new ResourceMapControl());
// 左上角，添加比例尺
var top_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT });
// 左上角，添加默认缩放平移控件
var top_left_navigation = new BMap.NavigationControl();
var overView = new BMap.OverviewMapControl();
// 右下角缩略图
var overViewOpen = new BMap.OverviewMapControl({ isOpen: false, anchor: BMAP_ANCHOR_BOTTOM_RIGHT });
$scope.mapObj.enableScrollWheelZoom();
$scope.mapObj.enableKeyboard();
$scope.mapObj.disableDoubleClickZoom();
$scope.mapObj.addControl(top_left_navigation);
$scope.mapObj.addControl(top_left_control);
$scope.mapObj.addControl(overViewOpen);
$scope.mapObj.addControl(new BMap.MapTypeControl());
//浏览器定位
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
$scope.mapObj.centerAndZoom(r.point, 12);
}else {
console.log('failed' this.getStatus());
var point = new BMap.Point(34.819696, 113.63872);
$scope.mapObj.centerAndZoom(point, 1);
}
},{enableHighAccuracy: true})
}
$scope.addressInfo = {
searchAddr:null,
lat:null,
lng:null
}
$scope.searchAddress = function(){
if(!$scope.addressInfo.searchAddr){
Message.danger('请输入地址')
}else{
if ($scope.mapNewMarker) {
$scope.mapObj.removeOverlay($scope.mapNewMarker);
}
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上，并调整地图视野
myGeo.getPoint($scope.addressInfo.searchAddr, function(point){
if (point) {
$scope.mapObj.centerAndZoom(point, 16);
$scope.mapObj.addOverlay(new BMap.Marker(point));
$scope.addressInfo.lat = point['lat'];
$scope.addressInfo.lng = point['lng'];
}
},
"河南省");
}
}
$scope.closeModal = function(){
$uibModalInstance.close($scope.addressInfo);
}
}); $scope.openMap = function(){
event.stopPropagation();// 阻止点击事件冒泡
var modalInstance = $uibModal.open({
keyboard: 'false',
backdrop: 'static',
size: 'lg',
templateUrl: 'mediajob/session/template/mapSignModal.html',
scope: $scope,
controller: 'mapSignController',
resolve: {
task: function() {
return task;
},
activity: function() {
return activity;
}
}
});
modalInstance.result.then(function (result) {
$scope.sign.place = result.searchAddr;
$scope.sign.lat = result.lat;
$scope.sign.lng = result.lng;
console.log(result);
}, function (reason) {
console.log(reason);
});
}<div class="popup-modal">
<div class="modal-header ">
<div class="close" data-dismiss="modal" data-ng-click="closeModal()">
<span>×</span>
</div>
<h4 class="modal-title" id="modal-title">地图选点</h4>
</div>
<div class="modal-body" id="modal-body" style="height: 500px; overflow: auto;">
<div style="display:inline">
<input type="text" class="form-control" data-ng-model="addressInfo.searchAddr" placeholder="搜索地点">
<button class="btn btn-default btn-flat left-most" data-ng-click="searchAddress()">确定</button>
</div>
<div id="map-container" style="height:100%"></div>
</div>
</div>var city = document.getElementById("cityName").value;
if(city != ""){
map.centerAndZoom(city,11); // 用城市名设置地图中心点
}
