JavaScript API 的使用(百度地图)

最新推荐文章于 2024-01-11 21:12:13 发布

@星城

最新推荐文章于 2024-01-11 21:12:13 发布

阅读量461

点赞数

分类专栏： JS小知识文章标签： javascript

本文链接：https://blog.csdn.net/qq_44624386/article/details/107502169

版权

JS小知识专栏收录该内容

16 篇文章 0 订阅

订阅专栏

百度地图JavaScript API 的使用

在使用这些控件和方法之前我们要做的准备：
1、我先要创建一个在百度app文档里面的密匙
注意：在那个白名单里面只需要填写一个星号就行，星号是表示所有人都可进行调用这个密匙的意思
2、再创建一个html文件，在文件你面要写上一个存放地图的div，然后在css样式表里面写这样的一个样式：

<style>
        html{
            height: 100%;
        }
        body{
            height: 100%;
            margin:0px;
            padding:0px;
        }
        #container{
            /* 这里的宽高可以根据自己的喜好设置宽高 */
            width: 100%;
            height: 100%;
        }
    </style>

3、在页面上创建一个script标签里面在创建一个地图实例
例：

	//创建地图实例
   var map = new BMap.Map("container");

正式书写使用百度地图是要注意：要想使用百度地图这必须要在head标签里面添加上一下两句话：

//这个mate有两个可以使用，要使用只需要选其中一个mate就行
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="initial-scale=1.0,user-scalab=no"/>
 //这里的密匙是使用自己先前申请的密匙
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密匙"></script>

以下是我根据百度地图的APP文档写的一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <meta name="viewport" content="initial-scale=1.0,user-scalab=no"/> -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>百度地图demo</title>
    <style>
        html{
            height: 100%;
        }
        body{
            height: 100%;
            margin:0px;
            padding:0px;
        }
        #container{
            /* 这里的宽高可以根据自己的喜好设置宽高 */
            width: 100%;
            height: 100%;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=lpKwFuyw6aVdYRtBG7xBhkffvtjh84vt"></script>
</head>
<body>
    <div id="container" ></div>
    <script>
        //创建地图实例
        var map = new BMap.Map("container");
        //添加控件前地图需要初始化
        map.centerAndZoom(new BMap.Point(116.404,39.915),11);
        map.addControl(new BMap.NavigationControl());
        //添加多个控件
        map.addControl(new BMap.NavigationControl()); //平移缩放控件   
        map.addControl(new BMap.ScaleControl());   //比例尺 
        map.addControl(new BMap.OverviewMapControl());//缩放地图    
        map.addControl(new BMap.MapTypeControl()); //地图类型   
        map.setCurrentCity("武汉"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用   
        //设置中心点坐标
        var point = new BMap.Point(115.20,31.15);
        //地图初始化，同时设置地图展示级别
        map.centerAndZoom(point,15);
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        window.setTimeout(function(){
            map.panTo(new BMap.Point(115.25,31.10));
        },2000);
    </script>
</body>
</html>

在这里要注意的几个点：

是在创建密匙的时候用在白名单上最好是只写上一个星号；
再就是在要使用百度地图插件是用写上他给出来的一个mate和外部应用的提个也是百度地图的一个插件script文件
要使用百度地图开发文档里面的所给出的控件和方法都先要创建一个
var map = new BMap.Map(“地图存放的元素的id名”);
在使用他给出的外部script文件里面的最后一点的ak=密匙（这里的密匙是使用自己创建的密匙，这里的密匙不能填错，填错就会显示不出来，还会弹出一个对提示框）
在使用时要对你的实例地图对象进行设置他的宽高才能显示出来

@星城

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript API 的使用(百度地图)

百度地图JavaScript API 的使用在使用这些控件和方法之前我们要做的准备：1、我先要创建一个在百度app文档里面的密匙注意：在那个白名单里面只需要填写一个星号就行，星号是表示所有人都可进行调用这个密匙的意思2、再创建一个html文件，在文件你面要写上一个存放地图的div，然后在css样式表里面写这样的一个样式：<style> html{ height: 100%; } body{
复制链接

扫一扫