简单实现一下百度地图

最新推荐文章于 2024-09-19 14:31:03 发布

青花TuT

最新推荐文章于 2024-09-19 14:31:03 发布

阅读量2.2k

点赞数

文章标签： javascript

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

版权

这篇博客介绍了如何简洁地实现百度地图，包括设置容器样式、引入API、创建地图实例。接着，作者展示了如何在地图上添加点、线、面，并进一步完善地图功能，添加了地图搜索功能，这一部分利用了jQuery库。

摘要由CSDN通过智能技术生成

一.简洁版百度地图

二.百度地图添加点线面

一.简洁版百度地图

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