angularjs1 实现地图添加自定义控件(搜索功能)及事件
// 添加地图自定义控件的事件
function addEventHandler(target, eventName, handler) {
if (target.addEventListener) {
target.addEventListener(eventName, handler, false);
} else if (target.attachEvent) {
target.attachEvent("on" + eventName, handler);
} else {
target["on" + eventName] = handler;
}
}
//自定义地图上的搜索控件
function searchControl(){
// 设置默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
this.searchBox = document.createElement("input");// 搜索框
this.searchBox.setAttribute("type", "text");
this.searchButton = document.createElement("span");// 搜索按钮
}
searchControl.prototype = new BMap.Control();
searchControl.prototype.initialize = function(map){
// 创建一个DOM元素
var div = document.createElement("div");
// 设置样式
div.className = "hosmapsearch";
var self = this;
var searchInput = this.searchBox;
searchInput.className = "basictypefour";
searchInput.placeholder = "搜索...";
var searchBtn = this.searchButton;
searchBtn.className = "hopsearcon";
addEventHandler(searchBtn, "click", function() {
var address = searchInput.value;
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint(address, function(point){
if (point) {
$scope.$apply(function(){
$scope.coordinate = JSON.stringify(point);
});
console.log($scope.coordinate);
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
}
}, address);
});
//添加输入框和搜索按钮到div中
div.appendChild(searchInput);
div.appendChild(searchBtn);
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div;
}
//初始化map
var map;
var initialize = {
initMap:function(){
map = new BMap.Map("hospitalAddMap"); // 创建Map实例
var point = new BMap.Point(39.919422,116.417773);//默认初始化地图中心点(BJ)
map.centerAndZoom(point,16);// 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
map.enableDragging();//拖拽
// 创建控件实例
var mySearchCtrl = new searchControl();
// 添加到地图当中
map.addControl(mySearchCtrl);
this.setCityCenter();
},
setCityCenter:function(){
function myFun(result){//ip定位初始化城市
var cityName = result.name;
console.log(cityName);
map.centerAndZoom(cityName, 16);
}
var myCity = new BMap.LocalCity();
myCity.get(myFun);
}
}
//init map
initialize.initMap();
angularjs1 实现地图添加自定义控件(搜索功能)及事件的更多相关文章
- 为Jekyll+GitHub Pages添加全文搜索功能
动态演示如下: [上传失败, 请自行搜索原文] 源码库: program-in-chinese/team_website 找到此JS工具: christian-fei/Simple-Jekyll-Se ...
- 给 hugo 博客添加搜索功能
起因 我的博客使用了 hugo 作为静态生成工具,自带的主题里也没有附带搜索功能.看来,还是得自己给博客添加一个搜索功能. 经过多方查找,从 Hugo Fast Search · GitHub 找到一 ...
- 百度地图API示例之添加自定义控件
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图api添加自定义控件
官网栗子:http://lbsyun.baidu.com/jsdemo.htm#b0_6 <!DOCTYPE html><html><head> <meta ...
- 百度地图API 批量添加 带检索功能的信息窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- lucene3.6笔记添加搜索功能
lucene为程序添加搜索功能,此功能基于已创建好的文档的索引之上.这里我已经为一些文档建立了索引,并保存到硬盘上.下面开始针对这些索引,添加搜索功能. 1.简单的TermQuery搜索 Java代码 ...
- 百度地图API的自动定位和搜索功能(移动端)
近期有个项目涉及到百度地图API,要求做到自动定位和搜索功能.煞费苦心的研究半天,终于能将两个功能合二为一,现将代码贴出来分享给大家,希望你们的砖搬得又快又好.注释不多,具体请参照:http://lb ...
- 011.Adding Search to an ASP.NET Core MVC app --【给程序添加搜索功能】
Adding Search to an ASP.NET Core MVC app 给程序添加搜索功能 2017-3-7 7 分钟阅读时长 作者 本文内容 1.Adding Search by genr ...
- dgango中admin下添加搜索功能
admin下添加搜索功能: 在表单中加入search_fields = ['ip','hostname'] 可模糊匹配 当有人在管理搜索框中进行搜索时,Django将搜索查询分解成单词,并返回包含 ...
随机推荐
- Codeforces Round #341 Div.2 B. Wet Shark and Bishops
题意:处在同一对角线上的主教(是这么翻译没错吧= =)会相互攻击 求互相攻击对数 由于有正负对角线 因此用两个数组分别保存每个主教写的 x-y 和 x+y 然后每个数组中扫描重复数字k ans加上kC ...
- J2EE学习(2)--何謂容器【良葛格学习笔记搬】
何謂容器 對於Java程式而言,JVM(Java Virtual Machine)是其作業系統,.java編譯為.class檔案,.class對於JVM而言,就是其可執行檔,你的Java程式基本上只認 ...
- Http协议:彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法
转载:http://mp.weixin.qq.com/s/uWPls0qrqJKHkHfNLmaenQ 导语 Http 缓存机制作为 web 性能优化的重要手段,对从事 Web 开发的小伙伴们来说是必 ...
- jQuery高级编程
jquery高级编程1.jquery入门2.Javascript基础3.jQuery核心技术 3.1 jQuery脚本的结构 3.2 非侵扰事JavaScript 3.3 jQuery框架的结构 3. ...
- 05:统计单词数【NOIP2011复赛普及组第二题】
05:统计单词数 总时间限制: 1000ms 内存限制: 65536kB 描述 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次 ...
- 基站查询接口,基站查询API
查询接口为商用,用于软件开发,非开发用户用不上.(说明:接口不能进行手机定位) 如需申请key,请联系QQ 2258172309. 1.移动联通基站查询接口 请求示例:http://www.cellm ...
- 【转】windows server 2012清除并重建SID
windows server 2012清除并重建SID 2012-09-17 17:51:51 标签:SID windows server 2012 原创作品,允许转载,转载时请务必以超链接形式标明文 ...
- 显示intent和隐示intent有什么区别
显式Intent定义:对于明确指出了目标组件名称的Intent,我们称之为显式Intent. 隐式Intent定义:对于没有明确指出目标组件名称的Intent,则称之为隐式Intent. 说明:And ...
- 【原】运动版的轮播图,有左右按钮和单独分页,原生JS版
运动版的轮播图,有左右按钮和单独分页 这个例子重点在于: 运动框架的复习,要灵活运动回调函数 始终以全局变量iNum来控制oUl的移动目的地,每次有任何动作,都是先判断iNum并改变iNum后去调用运 ...
- 彻底解决phpcms v9升级后,文章发布出现: Mysql 1267错误:MySQL Error : Illegal mix of collations 解决办法
彻底解决phpcms v9升级后,文章发布出现: MySQL Query : SELECT * FROM `withli_a`.`v9_keyword` WHERE `keyword` = '吼吼' ...