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 请参考 百度地图官方文档 ,这里不就多啰嗦了 本文介绍的是在百度地图上根据经纬度,自定义气泡时,气泡位置的偏移,在我们天朝这种事是很常见的,也见怪不怪了,在项目中使用的百度地图 ...
随机推荐
- [Training Video - 1] [Selenium Basics] [Xpath Selenium]
FirePath Press F12, you will see :
- Centos 7 安装和配置Redis
一. 安装 操作系统:Centos 7. 最小化安装 redis版本: 4.0.6 服务器地址:*** 第一步:下载redis安装包(如果有新的,下载最新的redis安装包) wget http:// ...
- 本周MySQL官方verified/open的bug列表(11月15日至11月21日)
本周MySQL verified的bug列表(11月15日至11月21日) 1. Bug #70923 Replication failure on multi-statement INSERT ...
- svn建立分支和svn代码合并的操作方法
首先说下为什么我们需要用到分支-合并.比如项目demo下有两个小组,svn下有一个trunk版.由于客户需求突然变化,导致项目需要做较大改动,此时项目组决定由小组1继续完成原来正进行到一半的工作[某个 ...
- 一条java开发工程师的升级路线,从初级到无语言障碍
看了一篇文章,讲述的是如何进行后端开发升级,现在分享下,我的总结,感谢写文章的作者大大,觉得他很会坚持,虽然一直在骂人,但是,我觉得人最大的敌人就是懒惰,所以骂得好 现在写下我的总结,希望对有志者有帮 ...
- Poj2231 Moo Volume 2017-03-11 22:58 30人阅读 评论(0) 收藏
Moo Volume Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 22104 Accepted: 6692 Descr ...
- android分屏
上手了Android N Preview,第一个不能错过的新特性就是App分屏的支持.Android7.0原生系统就可以支持两个App横屏并排或者竖屏上下摆放了.第二个新特性就是在Android TV ...
- ie11 兼容的问题
碰到一个问题 下拉列表点不了. 测试后,只在ie11下有这个问题. 先是在head 加<meta http-equiv=”X-UA-Compatible” content="IE=8& ...
- Tempdb--Row version
Trigger:在SQL SERVER 2005之前,触发器需要使用日志来获取DELETED AND INSERTED的数据,因此会打乱日志顺序写的模式,造成磁盘压力,在SQL Server2005 ...
- MSSQL中通过关键字查找所有存储过程
select b.namefrom 数据库名.dbo.syscomments a, 数据库名.dbo.sysobjects bwhere a.id=b.id and b.xtype='p' and a ...