案例效果
![](https://i-blog.csdnimg.cn/blog_migrate/7cc775f5d99c9998be92ac9ec8469df2.png)
本案例只实现了基本调用和简单的中英文转换。若想要实现定位功能,可使用Geolocation API(地理位置应用程序接口)。
实现代码
<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
<title>调用高德地图api</title>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
height: 100%;
}
#lang {
position: fixed;
top: 28px;
left: 22px;
width: 103px;
height: 90px;
background-color: rgba(241, 241, 229, 0.938);
line-height: 26px;
font-size: 12px;
border-radius: 11px;
padding-top: 10px;
padding-left: 10px;
}
</style>
<body>
<div id="container"></div>
<div id="lang">
<div><input type="radio" name="language" id="en"><span>英文地图</span></div>
<div><input type="radio" name="language" id="zh_en" <span>中英文对照</span></div>
<div><input type="radio" name="language" id="zh_cn" checked><span>中文地图</span></div>
</div>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=e5b72ff288f52692c5f2b6f74a119d4e"></script>
<script>
var map = map = new AMap.Map('container', {
resizeEnable: true,
lang: "zh-cn"
});
function setLang() {
map.setLang(this.id)
}
var radios = document.querySelectorAll("#lang input")
radios.forEach(radio => {
radio.addEventListener("click", setLang)
});
</script>
</body>