【H5】利用h5的地理定位功能，实现地图展示

最新推荐文章于 2024-07-10 15:57:54 发布

朱砂绛

最新推荐文章于 2024-07-10 15:57:54 发布

阅读量2.8k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42376054/article/details/101224060

版权

前端专栏收录该内容

18 篇文章 2 订阅

订阅专栏

案例效果

本案例只实现了基本调用和简单的中英文转换。若想要实现定位功能，可使用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>

    <!-- 引入高德javascript版 API-->
    <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" //可选值：en，zh_en, zh_cn
        });

        function setLang() {
            map.setLang(this.id)
        }

        // 绑定 radio 点击事件
        var radios = document.querySelectorAll("#lang input")
        radios.forEach(radio => {
            radio.addEventListener("click", setLang)
        });

    </script>
</body>