百度地图使用

最新推荐文章于 2022-04-26 11:21:56 发布

吃饭睡觉摸鱼上网

最新推荐文章于 2022-04-26 11:21:56 发布

阅读量111

点赞数

分类专栏： javascript html

本文链接：https://blog.csdn.net/huatoudd/article/details/104654567

版权

javascript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

一. 申请百度开发者密钥

请到百度开发中申请帐号和密钥，只需百度帐号即可。

二.创建容器，引用百度API

创建html文件：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Baidu Map </title>
    <style type="text/css">
        html {
            height: 100%
        }
       body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        #container {
            height: 100%;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="container" style="width:1600px;height:540px;"></div>
</div>
</body>
</html>

为创建地图做准备，使用div(图中id为container)作为容器.

引用百度API

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>

将密钥加入，此时可以开始创建地图了。

三.创建地图

在html中插入script脚本

var map = new BMap.Map("container");          // 创建地图实例
var point = new BMap.Point(113.55, 22.27);  // 创建点坐标
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);        // 鼠标滚动开启

此时，就可以打开百度地图了！

四.给地图创建标注,并自定义图标

在上面的基础上创建marker对象

var myIcon = new BMap.Icon("./img/shunfeng2.jpg", new BMap.Size(20, 20));
var marker = new BMap.Marker(point, {icon: myIcon})

在这里插入图片描述
如上图所视，图标已经出现了！

五.给行政区加边界线(其实就是增加新的标注)

// 设置行政区划线
var bdary = new BMap.Boundary();
// 通过get请求获取珠海的边界做标的rs对象
bdary.get('珠海', function (rs) {
    var count = rs.boundaries.length;
    for (var t = 0; t < count; t++) {
    	// 设置样式
        var ply = new BMap.Polygon(rs.boundaries[t],
            {
                strokeWeight: 2, //设置多边形边线线粗
                strokeOpacity: 0.5, //设置多边形边线透明度0-1
                StrokeStyle: "dashed", //设置多边形边线样式为实线或虚线，取值 solid 或 dashed
                strokeColor: "#ff0000", //设置多边形边线颜色
                fillColor: "#cfffff", //设置多边形填充颜色
                fillOpacity: 0.01 //设置多边形填充颜色透明度0-1  注：标红的地放你们可以去掉看一下效果，自己体验一下
            }); 
        //建立多边形覆盖物
        map.addOverlay(ply);  //添加覆盖物
    }
});

效果如下
完成！

吃饭睡觉摸鱼上网

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图使用

一. 申请百度开发者密钥请到百度开发中申请帐号和密钥，只需百度帐号即可。二.创建容器，引用百度API创建html文件：<!DOCTYPE html><html><head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <m...
复制链接

扫一扫