在浏览器中引入百度地图，并带有导航功能

1.去百度地图API官网申请一个密钥，然后引入百度地图API

<!-- 百度地图API --><script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的密钥"></script>

2.在需要放入地图的地方，引入下面代码

<div id="container"></div>是放入地图的容器，id一定要有，是为了后面操作用的。外面的div是存放这个地图的地方，也可以换成别的，但是外面的这个容器必须有固定的高度，否则地图就会看不到。

<div style="height: 426px;"><div id="container"></div>
</div>

3.在script中写入创建地图、导航以及文本信息功能

<script type="text/javascript">// 创建地图实例 var map = new BMapGL.Map("container");// 创建点坐标  var point = new BMapGL.Point(118.653369,24.938994);//中心点坐标// 初始化地图，设置中心点坐标和地图级别map.centerAndZoom(point, 20);//开启鼠标滚轮缩放地图map.enableScrollWheelZoom(true);//我在这里设计了两个点来做导航示例var p1 = new BMapGL.Point(118.650979,24.940231);//华大图书馆var p2 = new BMapGL.Point(118.653369,24.938994);//华大大门//导航功能var walking = new BMapGL.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});walking.search(p2, p1);//具体操作中也可以直接文字检索walking.search('华大大门','华大学生街');//相当于百度地图中直接输入起点和终点//文本信息var content = "<h4>车位A532</h4>";var label = new BMapGL.Label(content, {            // 创建文本标注position: p1,                                  // 设置标注的地理位置offset: new BMapGL.Size(-10, -60)           // 设置标注的偏移量})  map.addOverlay(label); </script>

浏览器中引入百度地图，并带有导航功能相关推荐

vue+element中引入百度地图
❤️❤️❤️ Topology可视化绘图引擎 ❤️❤️❤️ 前言: 您好,我是csdn-尔嵘,如果您需要雨伞,可以去TaoBao搜:华,诚,荣,邦,百,货谢谢您的支持! 1.首先你需要下载npm模 ...
react项目中引入百度地图
项目目录如下: 在此index.html中加入如下代码即可: <!DOCTYPE html> <html lang="en"><head>< ...
在浏览器中使用百度地图的定位服务获得经纬度
1.在使用百度地图之前,先登录百度账号,申请一个ak秘钥.申请ak访问码的地址为:http://lbsyun.baidu.com/apiconsole/key 申请一个ak用于访问百度地图API的访问 ...
前端学习（2466）：在前端页面中引入百度地图
1.配置你需要的地图效果百度地图生成器可选配置:位置.宽高.缩放.标注样式 2.导出导入地图代码点击获取代码,将代码引入到你的html.js.vue等文件中 ps:标注不显示的解决方法:将图标链接换 ...
前端学习（2467）：在前端页面中引入百度地图
走在前端的大道上插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示. 由于 ...
Vue中使用百度地图做路径分析并根据起终点坐标模拟道路里程桩
1.我们先要在vue中引入百度地图的API 第一步:在vue中的index.html文件中加上一个script标签: <script type="text/javascript&quo ...
Vue中使用百度地图
安装 npm $ npm install vue-baidu-map --save cdn <script src="https://unpkg.com/vue-baidu-map&q ...
vue中引入高德地图
❤️❤️❤️ Topology可视化绘图引擎 ❤️❤️❤️ 总的来说,vue组件中使用高德地图的方式有两种,一种是vue-amap :一套专门用于vue的高德地图插件:另外一种是原生的高德地图. 方式 ...
关于浏览器中使用百度定位
1.你想要在浏览器中使用百度地图定位首先需要申请百度AK 申请地址:http://lbsyun.baidu.com/index.php?title=jspopular点击打开链接我申请的web端应用 ...

浏览器中引入百度地图，并带有导航功能

在浏览器中引入百度地图，并带有导航功能

1.去百度地图API官网申请一个密钥，然后引入百度地图API

2.在需要放入地图的地方，引入下面代码

3.在script中写入创建地图、导航以及文本信息功能

浏览器中引入百度地图，并带有导航功能相关推荐

最新文章

热门文章