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("http://api.map.baidu.com/images/markers.png",
new BMap.Size(, ), {
offset: new BMap.Size(, ),
imageOffset: new BMap.Size(, -)
});
$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, );
}else {
console.log('failed'+this.getStatus());
var point = new BMap.Point(34.819696, 113.63872);
$scope.mapObj.centerAndZoom(point, );
}
},{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, );
$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,); // 用城市名设置地图中心点
}

angularJs集成百度地图的更多相关文章

  1. AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能

    在AngularJS应用中集成百度地图实现定位功能 注:请点击此处进行充电! 前言 根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...

  2. iOS开发之集成百度地图踩过的那些坑(基于 Xcode7.0/iOS9.2)

    本篇分4步讲述如何在项目中集成百度地图: 第一步:创建项目 第二步:利用 cocoaPod 导入百度地图的 SDK(pod 'BaiduMapKit' #百度地图SDK) 第三步:在 pch 文件中导 ...

  3. iOS开发---集成百度地图

    由于iOS MapKit框架很多情况并不能满足我们的需求,我们可以选择集成百度地图,那该如何操作呢? 申请Key 登录百度API管理中心申请Key http://lbsyun.baidu.com/ap ...

  4. 微信公众号开发《三》微信JS-SDK之地理位置的获取,集成百度地图实现在线地图搜索

    本次讲解微信开发第三篇:获取用户地址位置信息,是非常常用的功能,特别是服务行业公众号,尤为需要该功能,本次讲解的就是如何调用微信JS-SDK接口,获取用户位置信息,并结合百度地铁,实现在线地图搜索,与 ...

  5. 微信公众号开发《三》微信JS-SDK之地理位置的获取与在线导航,集成百度地图实现在线地图搜索

    本次讲解微信开发第三篇:获取用户地址位置信息,是非常常用的功能,特别是服务行业公众号,尤为需要该功能,本次讲解的就是如何调用微信JS-SDK接口,获取用户位置信息,并结合百度地铁,实现在线地图搜索,与 ...

  6. Android Studio 项目中集成百度地图SDK报Native method not found: com.baidu.platform.comjni.map.commonmemcache.JNICommonMemCache.Create:()I错误

    Android Studio 项目中集成百度地图SDK报以下错误: java.lang.UnsatisfiedLinkError: Native method not found: com.baidu ...

  7. Android 开发之集成百度地图的定位与地图展示

    app 应用中,大多数应用都具有定位功能,百度定位就成了开发人员的集成定位功能的首选,近期也在做定位功能,可是发现百度真是个大坑啊, sdk 命名更新了,相关代码却不更新,害得我花费了非常长时间来研究 ...

  8. iOS开发---集成百度地图完善版

    一.成为百度的开发者.创建应用 http://developer.baidu.com/map/index.php?title=首页 (鼠标移向 然后选择你的项目需要的功能 你可以在里面了解到你想要使用 ...

  9. iOS开发---集成百度地图,位置偏移问题

    iOS 集成百度SDK 请参考 百度地图官方文档 ,这里不就多啰嗦了 本文介绍的是在百度地图上根据经纬度,自定义气泡时,气泡位置的偏移,在我们天朝这种事是很常见的,也见怪不怪了,在项目中使用的百度地图 ...

随机推荐

  1. C语言压缩/解压缩

    一.简介 Lzlib 压缩库提供了在内存中的 LZMA 压缩和解压算法功能,包括对数据进行完整性检查.压缩格式是 lzip 参考: http://blog.csdn.net/damenhanter/a ...

  2. Python爬虫利器六之PyQuery的用法

    前言 你是否觉得 XPath 的用法多少有点晦涩难记呢? 你是否觉得 BeautifulSoup 的语法多少有些悭吝难懂呢? 你是否甚至还在苦苦研究正则表达式却因为少些了一个点而抓狂呢? 你是否已经有 ...

  3. [Training Video - 2] [Java Introduction] [Install Java and Eclipse, Create Class]

    Download Java : https://java.com/en/download/ Download Eclipse : https://www.eclipse.org/downloads/ ...

  4. 关闭Found duplicated code

    IDEA中的这个“发现重复代码 - Found duplicated code“的这个提示甚是烦躁. Settings —> Editor —> Inspections —> Gen ...

  5. struts,hibernate,spring配置时问题汇总及解决办法

    1.java.lang.NoClassDefFoundError: org/objectweb/asm/ClassVisitor 缺少asm-3.3.jar 2.java.lang.NoClassDe ...

  6. UVa 10603 Fill (暴力BFS+优先队列)

    题意:给定4个数,a,b,c,d,分别代表空杯子容积为a,b,一个盛满水的杯子容积为c,让你不断倒水,找一个dd,是不是存在某个时刻, 某个杯子里的水dd,和d相同,或者无限接近.让求最少的倒水量和d ...

  7. Linux驱动框架之misc类设备驱动框架

    1.何为misc设备 (1)misc中文名就是杂项设备\杂散设备,因为现在的硬件设备多种多样,有好些设备不好对他们进行一个单独的分类,所以就将这些设备全部归属于 杂散设备,也就是misc设备,例如像a ...

  8. Ian Goodfellow——对抗神经网络之父

    争议.流派,有关GAN的一切:Ian Goodfellow Q&A:https://baijiahao.baidu.com/s?id=1595081179447191755&wfr=s ...

  9. Hdu4280 Island Transport 2017-02-15 17:10 44人阅读 评论(0) 收藏

    Island Transport Problem Description In the vast waters far far away, there are many islands. People ...

  10. B-spline Curves 学习之B样条曲线定义(4)

    B-spline Curves: Definition 本博客转自前人的博客的翻译版本,前几章节是原来博主的翻译内容,但是后续章节博主不在提供翻译,后续章节我在完成相关的翻译学习. (原来博客网址:h ...