// 添加地图自定义控件的事件
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 实现地图添加自定义控件(搜索功能)及事件的更多相关文章

  1. 为Jekyll+GitHub Pages添加全文搜索功能

    动态演示如下: [上传失败, 请自行搜索原文] 源码库: program-in-chinese/team_website 找到此JS工具: christian-fei/Simple-Jekyll-Se ...

  2. 给 hugo 博客添加搜索功能

    起因 我的博客使用了 hugo 作为静态生成工具,自带的主题里也没有附带搜索功能.看来,还是得自己给博客添加一个搜索功能. 经过多方查找,从 Hugo Fast Search · GitHub 找到一 ...

  3. 百度地图API示例之添加自定义控件

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  4. 百度地图api添加自定义控件

    官网栗子:http://lbsyun.baidu.com/jsdemo.htm#b0_6 <!DOCTYPE html><html><head> <meta ...

  5. 百度地图API 批量添加 带检索功能的信息窗口

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. lucene3.6笔记添加搜索功能

    lucene为程序添加搜索功能,此功能基于已创建好的文档的索引之上.这里我已经为一些文档建立了索引,并保存到硬盘上.下面开始针对这些索引,添加搜索功能. 1.简单的TermQuery搜索 Java代码 ...

  7. 百度地图API的自动定位和搜索功能(移动端)

    近期有个项目涉及到百度地图API,要求做到自动定位和搜索功能.煞费苦心的研究半天,终于能将两个功能合二为一,现将代码贴出来分享给大家,希望你们的砖搬得又快又好.注释不多,具体请参照:http://lb ...

  8. 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 ...

  9. dgango中admin下添加搜索功能

    admin下添加搜索功能: 在表单中加入search_fields = ['ip','hostname']   可模糊匹配 当有人在管理搜索框中进行搜索时,Django将搜索查询分解成单词,并返回包含 ...

随机推荐

  1. 配置JDK环境变量,与各步骤的意义

    配置JDK环境变量 1,新建变量名:JAVA_HOME,变量值:C:\Program Files\Java\jdk1.7.0                   (变量值为jdk安装路径) 2,打开P ...

  2. 之前想搞一个nim但因为是自用我会持续修复完善

    异步方式的优点:客户端和服务端互相解耦,双方可以不产生依赖.缺点是:由于引入了消息中间件,在编程的时候会增加难度系数.此外,消息中间件的可靠性.容错性.健壮性往往成为这类架构的决定性因素. 幸运的是程 ...

  3. 16个常用IO流

    在包java.io.*:下 有以下16个常用的io流类: (Stream结尾的是字节流,是万能流,通常的视频,声音,图片等2进制文件, Reader/Writer结尾的是字符流,字符流适合读取纯文本文 ...

  4. POJ题目排序的Java程序

    POJ 排序的思想就是根据选取范围的题目的totalSubmittedNumber和totalAcceptedNumber计算一个avgAcceptRate. 每一道题都有一个value,value ...

  5. ListView的属性及方法详解

    本文转载于:http://blog.csdn.net/vector_yi/article/details/23195411 近期在重新学习Android控件知识,目前进行到ListView,感觉这是一 ...

  6. 开始使用Pyhton

    安装 第一个Python程序 首先我们打开python 交互式解释器, 执行如下命令: Python 3.5.1+ (default, Mar 30 2016, 22:46:26) [GCC 5.3. ...

  7. 转-springAOP基于XML配置文件方式

    springAOP基于XML配置文件方式 时间 2014-03-28 20:11:12  CSDN博客 原文  http://blog.csdn.net/yantingmei/article/deta ...

  8. python小知识点

    问题:求列表中每个元素的元素次方之和>>> a=[1,2,3,4]>>> k=len(a)第一种解法#    s=0#    for x in a:#        ...

  9. DB SQL Monitor 阻塞及等待事件监控工具

    SQL Monitor Designed By zhaoguan wang 说明------------------------------------------------------------ ...

  10. appsrequest v3 发布了

    程序猿们,想做windows app 不知道做什么项目的人可以上这个交流平台,获得创意,免费的:www.appsrequest.net