如何在页面上引用百度、腾讯地图？

原文链接：https://www.cnblogs.com/ai888/p/18613736

在前端开发中，要在页面上引用百度或腾讯地图，你通常需要按照以下步骤操作：

引用百度地图

  1. 获取API密钥：
    首先，你需要访问百度地图开放平台，地址：https://lbsyun.baidu.com/注册一个账号，并创建一个应用以获取API密钥（ak）。

  2. 在HTML中引入地图API：
    在HTML文件的<head>标签内，或者<body>标签的结束前，添加以下<script>标签来引入百度地图API。记得将YOUR_API_KEY替换为你从百度地图开放平台获取的API密钥。

    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=YOUR_API_KEY"></script>

  3. 编写JavaScript代码初始化地图：
    在HTML文件中添加一个容器元素（如<div>），用于显示地图。然后，在JavaScript代码中初始化地图并设置相关参数。

    <div id="mapContainer" style="width: 100%; height: 500px;"></div>
<script>
    var map = new BMapGL.Map("mapContainer"); // 创建地图实例，设置地图容器id
    var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标，设置为北京天安门
    map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
</script>

引用腾讯地图

  1. 获取API密钥：
    访问腾讯位置服务，地址：https://lbs.qq.com/注册账号并创建一个应用，以获取开发密钥（key）。

  2. 在HTML中引入地图API：
    在HTML文件的适当位置添加以下<script>标签，将YOUR_API_KEY替换为你的腾讯地图API密钥。

    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_API_KEY"></script>

  3. 编写JavaScript代码初始化地图：
    与百度地图类似，添加一个HTML容器元素，并在JavaScript中初始化腾讯地图。

    <div id="mapContainer" style="width: 100%; height: 500px;"></div>
<script>
    var map = new qq.maps.Map(document.getElementById('mapContainer'), {
        center: new qq.maps.LatLng(39.916527, 116.397128), // 设置北京天安门为中心点
        zoom: 15 // 设置地图缩放级别
    });
</script>

确保你的API密钥是有效的，并且注意保护密钥不被泄露，以防止滥用。此外，随着API版本的更新，引入地图的方式和可用的功能可能会有所变化，因此建议查阅最新的官方文档以获取详细信息。

 

posted @ 2025-10-16 15:13  yinghualeihenmei  阅读(7)  评论(0)    收藏  举报