angularJs集成百度地图
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集成百度地图的更多相关文章
- AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能
在AngularJS应用中集成百度地图实现定位功能 注:请点击此处进行充电! 前言 根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...
- iOS开发之集成百度地图踩过的那些坑(基于 Xcode7.0/iOS9.2)
本篇分4步讲述如何在项目中集成百度地图: 第一步:创建项目 第二步:利用 cocoaPod 导入百度地图的 SDK(pod 'BaiduMapKit' #百度地图SDK) 第三步:在 pch 文件中导 ...
- iOS开发---集成百度地图
由于iOS MapKit框架很多情况并不能满足我们的需求,我们可以选择集成百度地图,那该如何操作呢? 申请Key 登录百度API管理中心申请Key http://lbsyun.baidu.com/ap ...
- 微信公众号开发《三》微信JS-SDK之地理位置的获取,集成百度地图实现在线地图搜索
本次讲解微信开发第三篇:获取用户地址位置信息,是非常常用的功能,特别是服务行业公众号,尤为需要该功能,本次讲解的就是如何调用微信JS-SDK接口,获取用户位置信息,并结合百度地铁,实现在线地图搜索,与 ...
- 微信公众号开发《三》微信JS-SDK之地理位置的获取与在线导航,集成百度地图实现在线地图搜索
本次讲解微信开发第三篇:获取用户地址位置信息,是非常常用的功能,特别是服务行业公众号,尤为需要该功能,本次讲解的就是如何调用微信JS-SDK接口,获取用户位置信息,并结合百度地铁,实现在线地图搜索,与 ...
- 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 ...
- Android 开发之集成百度地图的定位与地图展示
app 应用中,大多数应用都具有定位功能,百度定位就成了开发人员的集成定位功能的首选,近期也在做定位功能,可是发现百度真是个大坑啊, sdk 命名更新了,相关代码却不更新,害得我花费了非常长时间来研究 ...
- iOS开发---集成百度地图完善版
一.成为百度的开发者.创建应用 http://developer.baidu.com/map/index.php?title=首页 (鼠标移向 然后选择你的项目需要的功能 你可以在里面了解到你想要使用 ...
- iOS开发---集成百度地图,位置偏移问题
iOS 集成百度SDK 请参考 百度地图官方文档 ,这里不就多啰嗦了 本文介绍的是在百度地图上根据经纬度,自定义气泡时,气泡位置的偏移,在我们天朝这种事是很常见的,也见怪不怪了,在项目中使用的百度地图 ...
随机推荐
- 安装python-empy
sudo python setup.py install
- MySql 8小时解决方案:proxool连接池
最近做的项目用的mysql数据库,前天挂在服务器上,昨天早晨上班一来,同事就说API数据接口访问不了了,我马上mstsc登陆服务器看,报错了.马上重启tomcat,结果还能正常运行,当时没管,今天过来 ...
- css控制同一个页面的两个表格,一个显示有边框线,而另一个没边框线
不显示边框的:<table border="0" cellspacing="0" cellpadding="" ><tr ...
- WebAPI请求(转)
出处:http://www.cnblogs.com/babycool/p/3922738.html 继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的g ...
- [Selenium With C#基础教程] Lesson-03 超级链接
作者:Surpassme 来源:http://www.jianshu.com/p/83809943e751 声明:本文为原创文章,如需转载请在文章页面明显位置给出原文链接,谢谢. 超级链接或链接是We ...
- [20190423]oradebug peek测试脚本.txt
[20190423]oradebug peek测试脚本.txt --//工作测试需要写一个oradebug peek测试脚本,不断看某个区域内存地址的值. 1.环境: SCOTT@book> @ ...
- 网页方式访问 QQ 小说书架
iPad.平板电脑 http://bookshelf.html5.qq.com/page?t=pad#!/bookshelf/ iPhone.手机 http://bookshelf.html5.qq. ...
- Rest-assured 写日志到 log4j
背景: 采用Rest-assured,日志采用log4j,发现Rest-assured本身只支持打印日志到控制台,但期望打印到文件中以便排查问题 请求打印的语句只能输出到控制台 given().log ...
- [多线程] Thread
多线程 概述 单任务处理:一个任务完成后才能进行下一个任务. 多任务处理:CPU分时操作,每个任务看似同时运行. 进程 应用程序的一个运行实例,包含程序所需资源的内存区域,是操作系统进行资源分配的单元 ...
- C语言/C++编程学习:不做C/C++工作也要学C/C++的原因!
C语言是面向过程的,而C++是面向对象的 C和C++的区别: C是一个结构化语言,它的重点在于算法和数据结构.C程序的设计首要考虑的是如何通过一个过程,对输入(或环境条件)进行运算处理得到输出(或实现 ...