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 请参考 百度地图官方文档 ,这里不就多啰嗦了 本文介绍的是在百度地图上根据经纬度,自定义气泡时,气泡位置的偏移,在我们天朝这种事是很常见的,也见怪不怪了,在项目中使用的百度地图 ...
随机推荐
- sqlserver2014新特性
1.SQL Server 2014新特性探秘(1)-内存数据库 在传统的数据库表中,由于磁盘的物理结构限制,表和索引的结构为B-Tree,这就使得该类索引在大并发的OLTP环境中显得非常乏力,虽然有很 ...
- YUI前端优化之内容篇
Excetional Performance团队总结出了一系列可以提高网站速度的方法.可以分为7大类34条.包括内容.服务器.cookie.CSS.JavaScript.图片.移动应用等七部分.一.内 ...
- typedef char int8; 这样定义的好处?
用typedef定义int8代表char:然后用int8去定义其他变量.一旦系统中char不再是占8位的数据时,可重新typedef新的占8位的类型为int8,而所有的用int8定义的8为类型数不用再 ...
- 咏南树形下拉列表数据敏感控件--TYNdbTreeList
咏南树形下拉列表数据敏感控件--TYNdbTreeList 软件系统拥有自己通用的下拉列表控件可以大大地加速系统的开发和易用性. 控件支持DELPHI5及以上版本安装并使用. 控件的用法: proce ...
- Android-GsonUtil工具类
JSON解析封装相关工具类 public class GsonUtil { private static Gson gson = null; static { if (gson == null) { ...
- [Elixir004]通过环境变量(Environment Variables)来管理config
在elixir的config中我们有时会使用的到一些不想暴露出来的配置项,常用的作法是如Phoenix #config/prod.exs use Mix.Config ... # Finally im ...
- [Erlang21]Erlang性能分析工具eprof fporf的应用
前段时间项目改代码突然cpu波动很大,排查了好久都没有找到原因,只能求助于性能测试工具 : <<Erlang程序设计>>----Joe Armstorng[哈哈,登月第一人 ...
- eayui js动态加载Datagrid,自适应宽度,高度
HTML: <div class="easyui-layout" style="min-height:100%;min-width:100%;"> ...
- .Net C# 阿拉伯数字转为中文金额数字
一个练习,将阿拉伯数字转为中文金额数字,针对包含整数的金额有问题 代码: public string ReturnStr(string inputNum) { ", }; string[] ...
- C#冒泡排序(完整代码)
百度百科 冒泡排序是笔试面试经常考的内容,虽然它是这些算法里排序速度最慢的 原理:从头开始,每一个元素和它的下一个元素比较,如果它大,就将它与比较的元素交换,否则不动. 这意味着,大的元素总是在向后慢 ...