百度地图API——将地图引入项目

最新推荐文章于 2022-05-20 15:51:28 发布

weixin_45846980

最新推荐文章于 2022-05-20 15:51:28 发布

阅读量408

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_45846980/article/details/109002960

版权

想必在大家在浏览美团，滴滴打车等应用都有地图应用，这大大的方便了我们的生活，减少我们迷路，提升了我们的工作效率
网站上建设地图有四个好处

网站地图能够让搜素引擎产生好感，更快速的抓取网站；
网站地图的添加可以有效提升网站的收录；
网站地图可以提升连接页面的权重；
网站地图有利于用户体验
在百度地图给开发入手最好体验的两种服务
一个是开发者学院

还有一个文档案例

在这里插入图片描述
使新手也能很好熟悉业务代码，提早将学到的知识运用到项目中
这是一个小demo

demo

<!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%}  
    </style>  
</head>  
<body>
    <div id="container"></div>
</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=RidzGVmPipQMnYzkHvdtkng5HpRDPGSj"></script>  
<script> 
var map = new BMap.Map("container");          // 创建地图实例  
var point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
 map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别  
 map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>
</html>

在这里插入图片描述
还有简单实用的工具代码

1.初始化地图，并设置地图中心点

var map = new BMap.Map("allmap");    // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
 
当然也可以根据城市名称设置地图的中心点：
map.centerAndZoom("上海",15);  

map.addControl(new BMap.ScaleControl());    //添加左下方比例尺控件
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
map.setCurrentCity("北京");          // 设置地图显示的城市

2.拖拽地图与滚轮的使用

map.enableScrollWheelZoom(true);
map.disableDragging();     //禁止拖拽
map.enableScrollWheelZoom();    //启用滚轮放大缩小

3.创建地图的时候，关闭地图底图按钮，建筑的可点功能

var map = new BMap.Map("allmap", {enableMapClick:false});//构造底图时，关闭底图可点功能

4.移动地图，设置地图最大最小的缩放级别

var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 创建Map实例,设置地图允许的最小/大级别
 
//当然也可以动态设置级别：
map.setMaxZoom(10);
map.setMinZoom(2);

5.获得地图当前中心点，返回两点间的距离

getCenter()
getDistance(start:Point, end:Point)
var pointA = new BMap.Point(106.486654,29.490295);  // 创建点坐标A--大渡口区
var pointB = new BMap.Point(106.581515,29.615467);  // 创建点坐标B--江北区
alert('距离是：'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。');  //获取两点距离,保留小数点后两位

等等，更多实用功能参照
JavaScript API GL
开发者学院

weixin_45846980

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图API——将地图引入项目

想必在大家在浏览美团，滴滴打车等应用都有地图应用，这大大的方便了我们的生活，减少我们迷路，提升了我们的工作效率网站上建设地图有四个好处网站地图能够让搜素引擎产生好感，更快速的抓取网站；网站地图的添加可以有效提升网站的收录；网站地图可以提升连接页面的权重；网站地图有利于用户体验在百度地图给开发入手最好体验的两种服务一个是开发者学院还有一个文档案例使新手也能很好熟悉业务代码，提早将学到的知识运用到项目中这是一个小demodemo<!DOCTYPE html>
复制链接

扫一扫