地图显示---英文、中英文地图

最新推荐文章于 2024-03-01 10:17:25 发布

往前的

最新推荐文章于 2024-03-01 10:17:25 发布

阅读量5.3k

点赞数

分类专栏：高德地区API学习文章标签：高德地图中文英文

本文链接：https://blog.csdn.net/m0_37355951/article/details/74309016

版权

高德地区API学习专栏收录该内容

5 篇文章 1 订阅

订阅专栏

概述：

主要学习高德的一个方法就是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"
	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="显示英文底图" /> <input
			id="zh_en" type="button" class="button" value="显示中英文对照底图" /> <input
			id="zh_cn" type="button" class="button" value="显示中文底图" />
	</div>
	<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script
	src="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的值

效果：