加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > 正文

Google Map API教程之使用GControl对象在地图上添加control按钮

发布时间:2018-09-02 18:04:35 所属栏目:创业 来源:站长网
导读:今天查看我网站的地图已经被谷歌收录了5900条,而百度也开始收录了,很欣慰~再接再厉,今天写的这一篇Google map api教程是关于在Google地图上添加control按钮的,用到的是Google Map API的GControl对象,通过initialize的方法插入一个div到地图上,再通过

今天查看我网站的地图已经被谷歌收录了5900条,而百度也开始收录了,很欣慰~再接再厉,今天写的这一篇Google map api教程是关于在Google地图上添加control按钮的,用到的是Google Map API的GControl对象,通过initialize的方法插入一个div到地图上,再通过new GControlPosition设置按钮的位置,最后通过Gmap的addControl方法添加这个按钮。最终效果截图如下:

control

实现方法原理分析

首先建立一个GControl的原型control,然后定义其initialize 方法:主要是建立一个div,并且制定div的onclick事件,最后通过gmap.getContainer().appendChild(buttonDiv)插入到地图中去。
最后定义getDefaultPosition的方法,通过GControlPosition对象设置按钮所在地图的具体位置。

Google Map API 代码

function control() {};
control.prototype = new GControl();
control.prototype.initialize = function(gmap){
var buttonDiv = document.createElement("div");
buttonDiv.id = "control";
buttonDiv.appendChild(document.createTextNode("清除标点"));
buttonDiv.onclick = function(){
gmap.clearOverlays();
};
gmap.getContainer().appendChild(buttonDiv);
return buttonDiv;
};

control.prototype.getDefaultPosition = function(){
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(510, 7));
};

最后我们再通过gmap.addControl(new control());将这个按钮加入到地图中

出处:http://www.js8.in/564.html

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读