如何在网页中嵌入百度地图和腾讯地图?

8 min read

引用百度地图:

  1. 首先,在需要引用百度地图的页面中,添加以下代码:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script>
  1. 将“你的AK”替换为你在百度开发者中心申请的地图API密钥。
  2. 然后,在需要显示地图的地方,添加以下代码:
<div id="map"></div>
  1. 最后,在页面底部添加以下代码:
<script type="text/javascript">
  // 百度地图API功能
  var map = new BMap.Map("map");    // 创建Map实例
  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
</script>

其中,BMap.Point()中的经度和纬度可以根据需要进行更改。

引用腾讯地图:

  1. 在需要引用腾讯地图的页面中,添加以下代码:
<script type="text/javascript" src="https://map.qq.com/api/gljs?v=1.exp&key=你的秘钥"></script>
  1. 将“你的秘钥”替换为你在腾讯地图开发平台申请的密钥。
  2. 然后,在需要显示地图的地方,添加以下代码:
<div id="map"></div>
  1. 最后,在页面底部添加以下代码:
<script type="text/javascript">
  // 腾讯地图 API功能
  var map = new mapboxgl.Map({
    container: 'map', // 显示地图的容器
    center: [116.404, 39.915], // 地图中心点经纬度
    zoom: 11, // 地图显示级别
    style: 'https://map.qq.com/styles/mapbox/streets-chinese-v1' // 地图样式
  });
</script>

其中,mapboxgl.Map()中的经度和纬度可以根据需要进行更改。同时,style的参数可以选择腾讯提供的其他地图样式。