百度地图JavaScript API自定义控件使用记录

最新推荐文章于 2025-02-12 23:05:25 发布

原创最新推荐文章于 2025-02-12 23:05:25 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

菜鸡日记同时被 3 个专栏收录

44 篇文章

订阅专栏

前端

33 篇文章

订阅专栏

扩展

8 篇文章

订阅专栏

这篇博客介绍了如何在百度地图API中创建一个自定义控件，并将城市列表控件嵌套进去。首先创建Map实例并设置初始位置和级别，然后添加城市列表控件。接着定义了一个名为MyControl的自定义控件类，该类继承于BMap.Control，并实现了initialize方法，将城市列表控件添加到自定义控件的DOM元素中。最后，创建自定义控件实例并将其添加到地图上。

某页面中使用了百度地图，需要将自有的城市列表控件嵌套进一个自定义控件中

var cityCtrl = new BMapGL.CityListControl();
// 单独使用
var map = new BMapGL.Map("allmap");    // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);

// 定义一个控件类，即function    
function MyControl(){    
    // 设置默认停靠位置和偏移量  
    this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;    
    this.defaultOffset = new BMap.Size(10, 10);    
}    
// 通过JavaScript的prototype属性继承于BMap.Control   
MyControl.prototype = new BMap.Control();

// 自定义控件必须实现initialize方法，并且将控件的DOM元素返回   
// 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中   
MyControl.prototype.initialize = function(map){    
    // 创建一个DOM元素   
    var div = document.createElement("div");    
    // 添加文字说明    
    div.appendChild(document.createTextNode("放大2级"));    
    // 设置样式    
    div.style.cursor = "pointer";    
    div.style.border = "1px solid gray";    
    div.style.backgroundColor = "white";    
	div.append(cityCtrl.initialize(map) )   
    // 添加DOM元素到地图中   
    map.getContainer().appendChild(div);    
    // 将DOM元素返回  
    return div;    
 }
// 创建控件实例    
var MyControl= new MyControl();    
// 添加到地图当中    
map.addControl(MyControl);