简单实现一下百度地图

最新推荐文章于 2024-05-16 01:36:30 发布

青花TuT

最新推荐文章于 2024-05-16 01:36:30 发布

阅读量2.1k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Mr_krab/article/details/123905860

版权

一.简洁版百度地图

二.百度地图添加点线面

一.简洁版百度地图

1.设置容器样式

在我们创建好的html文件中写好自己想设置地图的宽高

<style type="text/css">
        html {
            height: 100%
        }
        
        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        
        #container {
            height: 600px;
            width: 800px;
        }
    </style>

2.引入百度地图api文件

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

3.创建地图容器元素

地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。

<div id="container"></div>

4.创建地图实例

<script type="text/javascript">
var map = new BMapGL.Map("container");
// 创建地图实例 
var point = new BMapGL.Point(116.404, 39.915);
// 创建点坐标 
map.centerAndZoom(point, 15);
// 初始化地图，设置中心点坐标和地图级别 
</script>

5.完整代码及效果


<!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=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I"></script>
    <style type="text/css">  
        #container{height: 600px;width: 800px;}   
         /*容器地图的宽高  */
    </style> 
</head>
<body>
    <div id="container"></div>
    <!-- 存放地图的容器 -->
    <script type=

最低0.47元/天解锁文章

青花TuT

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
简单实现一下百度地图

目录一.简洁版百度地图二.百度地图添加点线面一.简洁版百度地图1.设置容器样式在我们创建好的html文件中写好自己想设置地图的宽高<style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padd...
复制链接

扫一扫