百度地图在项目应用示例

百度地图应用示例

概述：
      百度地图是为用户提供包括智能路线规划、智能导航、实时路况等出行相关服务的平台。因此百度地图在我们的生活当中应用极为广泛，所以下面我就来为大家分享一下在项目中怎么实现百度地图。
1、申请百度AK:
      要想在项目中应用百度地图，首先我们就需要申请百度AK,它的申请周期需要2个工作日。具体的申请方法详见，百度地图AK申请流程（https://blog.csdn.net/qq_27512271/article/details/82994240）。
2、引入百度地图JS:
      第二步，就需要我们引入js，详见如下所示：

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

3、编写div标签：

<div id="allmap"></div>

4、实现百度地图API功能：

<script type="text/javascript">// 百度地图API功能var map = new BMap.Map("allmap");    // 创建Map实例var point = new BMap.Point(116.231392,40.084791);map.centerAndZoom(point, 15);  // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom();                  // 启用滚轮放大缩小。//添加一个跳跃的点var marker = new BMap.Marker(point);  // 创建标注map.addOverlay(marker);               // 将标注添加到地图中marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画//添加控件var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮map.addControl(top_left_control);map.addControl(top_left_navigation);map.addControl(top_right_navigation);
</script>

经过以上四步百度地图在项目应用就彻底实现了。下面我们就展示一下全部的示例代码。

<!DOCTYPE html>
<html>
<head><title>demo</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><link rel="stylesheet" href="${(basePath)! }/plug-in/phzd/css/main.css"/><script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你申请的AK"></script><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}</style></head>
<body>
<div id="allmap"></div>
<script type="text/javascript">// 百度地图API功能var map = new BMap.Map("allmap");    // 创建Map实例var point = new BMap.Point(116.231392,40.084791);map.centerAndZoom(point, 15);  // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom();                  // 启用滚轮放大缩小。//添加一个跳跃的点var marker = new BMap.Marker(point);  // 创建标注map.addOverlay(marker);               // 将标注添加到地图中marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画//添加控件var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮map.addControl(top_left_control);map.addControl(top_left_navigation);map.addControl(top_right_navigation);
</script>
</body>
</html>

百度地图在项目应用示例相关推荐

百度地图API公交检索示例 - 标绘结果路线、返回结果集
百度地图API具有公交检索功能:使用它的在线SDK示例来修改代码,快速演示一下: <html> <head><meta http-equiv="Content- ...
vue调用百度地图API输入提示示例下拉列表一直被触发问题
2019独角兽企业重金招聘Python工程师标准>>> 先看图然后点确定,居然下拉框又被触发了,而且在添加页面各种输入框只要一输入文字就会触发地图下拉框展示,很恶心的一个bug,不 ...
百度地图开发技术方案及解决办法
技术方案及解决办法文章目录技术方案及解决办法总体方案基础框架前端网页后端程序结合搭建方法跨域解决 python处理excel 问题描述解决办法网页结构 vue实例内容引入 ele ...
百度地图点聚合MarkerClusterer性能优化
公司要求做个百度地图点聚合的性能优化,需一次性加载9万条数据. 记录下自己的优化过程.(只想看优化代码的可直接移步:步骤三) 一.引入百度地图 vue项目中,在index.html文件中用script ...
安利一个方便加载百度地图的js插件
公司业务需要经常要用到百度地图,而且项目不是SPA.很多页面都要用到百度地图,但是百度地图的官网示例使用特别繁琐,每次需要copy脚本以及相关的地图工具库还要改ak,那么有没有什么好用的插件能免去这么 ...
springboot校园交友网站1.0（Springboot+Mybatis+thymeleaf+人脸识别+语音助手+百度地图）
文章目录涉及技术数据库设计前端搭建后端实现项目重点实现搜索栏(模糊查询) 首页发布请求遍历分类跳转项目难点接口调用(人脸识别+语音识别+百度地图API) 人脸识别语音识别百度地图 ...
百度地图开发-搭建基础脚手架 01
01 搭建基础脚手架由于工作需要,最近在研究Android版百度地图SDK,仔细阅读其公开文档(官方教程)后,只想说一句:百度的教程牛叉,写的很不通俗易懂,新手按照那个文档来操作会遇到各种坑,根本很 ...
echarts使用百度地图
前情提要获得百度地图授权的ak密钥引入echarts的百度地图准备好echarts百度地图需要的数据自定义百度地图的样式去掉百度地图的logo 一.获取百度地图的ak密钥首先得注册成为百度 ...
Android开发——百度地图定位
Android开发--百度地图定位项目需求项目内容注册和获取秘钥获取项目SHA1码获取项目AK码 AS依赖配置 AS源码 AndroidManifest文件布局文件 DemoApplica ...
php地图距离计算,php百度地图计算两地现实距离
请自行到百度地图官网申请您的ak   <!--<html lang=& ...

百度地图在项目应用示例

百度地图应用示例

百度地图在项目应用示例相关推荐

最新文章

热门文章