引用百度地图:
- 首先,在需要引用百度地图的页面中,添加以下代码:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script>
- 将“你的AK”替换为你在百度开发者中心申请的地图API密钥。
- 然后,在需要显示地图的地方,添加以下代码:
<div id="map"></div>
- 最后,在页面底部添加以下代码:
<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()中的经度和纬度可以根据需要进行更改。
引用腾讯地图:
- 在需要引用腾讯地图的页面中,添加以下代码:
<script type="text/javascript" src="https://map.qq.com/api/gljs?v=1.exp&key=你的秘钥"></script>
- 将“你的秘钥”替换为你在腾讯地图开发平台申请的密钥。
- 然后,在需要显示地图的地方,添加以下代码:
<div id="map"></div>
- 最后,在页面底部添加以下代码:
<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的参数可以选择腾讯提供的其他地图样式。