使用百度地图实现自己网页里的地图

月凉笙

已于 2022-04-01 22:26:24 修改

阅读量606

点赞数 1

文章标签： javascript html5

于 2022-04-01 22:24:58 首次发布

本文链接：https://blog.csdn.net/qq_44769099/article/details/123908565

版权

准备环节

首先，去百度地图官网注册账号，申请成为开发者

创建应用

得到自己的AK秘钥

开始使用

导入百度地图的api

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=上方得到的AK密钥"></script>

在js里进行初始化地图逻辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个地图</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=自己的AK秘钥"></script>
    <style type="text/css">  
        #container{height: 600px;width: 800px;}   
         /*容器地图的宽高  */
    </style> 
</head>
<body>
    <div id="container"></div>
    <!-- 存放地图的容器 -->
    <script type="text/javascript">
        var map = new BMapGL.Map("container");
        // 创建地图实例 
        var point = new BMapGL.Point(116.404, 39.915);
        // 创建点坐标 
        map.centerAndZoom(poi