概述:
主要学习高德的一个方法就是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的值
效果: