首页 > 编程知识 正文

地上的英文,英文地

时间:2023-05-06 15:02:58 阅读:261982 作者:2913

概述:

主要学习高德的一个方法就是setLang('语言');  en 英文, zh_en 中英文, zh_cn 中文

注意点:div标签的id必须为‘mapContainer’  其它id不行。。。。这。。。。

问题原因是 http://cache.amap.com/lbs/static/main.css?v=1.0 css样式的是根据mapContainer写一些样式,你自己定义并没有css修饰,地图被挤掉了

#mapContainer {position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;}

<!doctype html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"><title>显示中文、英文、中英文</title><link rel="stylesheet"rel="external nofollow" href="http://cache.amap.com/lbs/static/main.css?v=1.0" /></head><body><div id="mapContainer"></div><div class="button-group"><input id="en" type="button" class="button" value="显示英文底图" /> <inputid="zh_en" type="button" class="button" value="显示中英文对照底图" /> <inputid="zh_cn" type="button" class="button" value="显示中文底图" /></div><script src="http://cache.amap.com/lbs/static/es5.min.js"></script><scriptsrc="http://webapi.amap.com/maps?v=1.3&key=d8492bc40456b181de4f610841da623f"></script><script> var map = new AMap.Map('mapContainer', { center: [121.498586, 42.239637] }); ['en', 'zh_en', 'zh_cn'].forEach(function(btn) { var button = document.getElementById(btn); AMap.event.addDomListener(button,'click',clickListener) }); function clickListener() { map.setLang(this.id); } </script></body></html>
总结:

1.注意放置地图的容器的ID必须为mapContainer, 其它自定义没有用

2、定义按钮组 id为高德支持的语言

3、['en','zh_en','zh_cn'].forEach() 循环遍历数组,通过id获取对应的dom元素

4、AMap.event.addDomListener(绑定的对象,事件类型click, 触发的函数【注意没有括号】) 简单来说没有括号不会立即执行

具体参考;

http://www.cnblogs.com/sammiyu/p/my_tech3.html

5、最后this,就是触发事件的对象,通过this.id 获取id的值


效果:


版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。