js 百度地图 添加自定义控件
2015-04-01 00:00
295 查看
摘要: 添加自定义控件时,当拖动地图时,控件将不会连同地图拖动而拖动。
注意控件和标注的区别。
// 定义一个控件类,即function
function ZoomControl(){
// 默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
}
// 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();
// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
ZoomControl.prototype.initialize = function(map){
// 创建一个DOM元素
var div = document.createElement("div");
// 添加文字说明
div.appendChild(document.createTextNode("设置地址"));
// 设置样式
div.style.marginLeft = "54%";
div.style.marginTop = "58%";
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "red";
// 绑定事件,点击一次放大两级
div.onclick = function(e){
alert('当前地图中心点:' + map.getCenter().lng + ',' + map.getCenter().lat);
mcenter(map.getCenter());
//$state.go('getPosition');
//map.setZoom(map.getZoom() + 2);
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 创建一个DOM元素
var div2 = document.createElement("div");
// 设置样式
div2.style.marginLeft = "45%";
div2.style.marginTop = "65%";
div2.style.height = "41px";
div2.style.width = "34px";
div2.style.cursor = "pointer";
div2.style.position = "absolute";
div2.style.backgroundImage = "url(images/dingwei2.png)";
div2.onclick = function(e){
alert('当前地图中心点:' + map.getCenter().lng + ',' + map.getCenter().lat);
mcenter(map.getCenter());
//$state.go('getPosition');
//map.setZoom(map.getZoom() + 2);
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div2);
// 将DOM元素返回
return div;
}
// 创建控件
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);
//alert('当前地图中心点:' + map.getCenter().lng + ',' + map.getCenter().lat);
map.addEventListener("dragend",function(e){
//var pt = map.getBounds().getCenter();
//window.status = "LON:" + pt.lng + " LAT:" + pt.lat;
//alert(window.status);
// alert('当前地图中心点:' + map.getCenter().lng + ',' + map.getCenter().lat);
mcenter(map.getCenter());
});
function mcenter(certer){
Ds.set('Latitude',certer.lat);
Ds.set('Longitude',certer.lng);
// 百度地图API功能
var point = new BMap.Point(certer.lng,certer.lat);//new BMap.Point(116.331398,39.897445);
var gc = new BMap.Geocoder();
gc.getLocation(point, function(rs){
var addComp = rs.addressComponents;
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
$scope.cpoint = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
Ds.set('dinnerAddress',$scope.cpoint);
});
}
注意控件和标注的区别。
// 定义一个控件类,即function
function ZoomControl(){
// 默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
}
// 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();
// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
ZoomControl.prototype.initialize = function(map){
// 创建一个DOM元素
var div = document.createElement("div");
// 添加文字说明
div.appendChild(document.createTextNode("设置地址"));
// 设置样式
div.style.marginLeft = "54%";
div.style.marginTop = "58%";
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "red";
// 绑定事件,点击一次放大两级
div.onclick = function(e){
alert('当前地图中心点:' + map.getCenter().lng + ',' + map.getCenter().lat);
mcenter(map.getCenter());
//$state.go('getPosition');
//map.setZoom(map.getZoom() + 2);
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 创建一个DOM元素
var div2 = document.createElement("div");
// 设置样式
div2.style.marginLeft = "45%";
div2.style.marginTop = "65%";
div2.style.height = "41px";
div2.style.width = "34px";
div2.style.cursor = "pointer";
div2.style.position = "absolute";
div2.style.backgroundImage = "url(images/dingwei2.png)";
div2.onclick = function(e){
alert('当前地图中心点:' + map.getCenter().lng + ',' + map.getCenter().lat);
mcenter(map.getCenter());
//$state.go('getPosition');
//map.setZoom(map.getZoom() + 2);
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div2);
// 将DOM元素返回
return div;
}
// 创建控件
var myZoomCtrl = new ZoomControl();
// 添加到地图当中
map.addControl(myZoomCtrl);
//alert('当前地图中心点:' + map.getCenter().lng + ',' + map.getCenter().lat);
map.addEventListener("dragend",function(e){
//var pt = map.getBounds().getCenter();
//window.status = "LON:" + pt.lng + " LAT:" + pt.lat;
//alert(window.status);
// alert('当前地图中心点:' + map.getCenter().lng + ',' + map.getCenter().lat);
mcenter(map.getCenter());
});
function mcenter(certer){
Ds.set('Latitude',certer.lat);
Ds.set('Longitude',certer.lng);
// 百度地图API功能
var point = new BMap.Point(certer.lng,certer.lat);//new BMap.Point(116.331398,39.897445);
var gc = new BMap.Geocoder();
gc.getLocation(point, function(rs){
var addComp = rs.addressComponents;
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
$scope.cpoint = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
Ds.set('dinnerAddress',$scope.cpoint);
});
}
相关文章推荐
- 百度地图简单使用——添加折线,圆形等(html,js)
- 百度地图添加遮罩js
- 通过js 向table添加或修改row及cell
- 为ASP.NET WEB自定义控件添加提交事件
- 用JS给DropDownList添加新项! --zt
- 关于JS动态添加事件
- ASP.NET2.0自定义控件开发(3) ----给控件添加下拉列表属性
- 通过js 向table添加或修改row及cell
- js为xml添加节点和属性
- 如何在web控件中添加Js方法
- JS动态添加删除控件
- [原创]用JS给DropDownList添加新项!
- 表格中用js左右添加从下拉列表中选择的内容
- js: select列表值的添加删除
- 为ToolBarManager添加自定义控件
- js-给你的博客添加一双眼睛
- 批量添加JS脚本,像126发送邮件时的上传附件,可以自由增,减
- 无法向webForm添加自定义控件?
- 在写自定义控件时,如果控件某个属性允许被验证控件验证,需要注意微软在 WebUIValidation.js内的实现。
- ASP.NET2.0自定义控件开发(2) ----给控件添加简单属性