百度地图开发实例文章（一）

coordinate35 发布于2019-08-22 13:52 / 1057人阅读

摘要：一前言这是百度地图开发系列文章的第一篇，主要讲如何使用百度地图，介绍了如何通过官方给出的和开发文档来在百度地图上面做开发，最后我们将通过一个例子成功运行代码。

一前言

这是百度地图javascript开发系列文章的第一篇，主要讲如何使用百度地图，介绍了如何通过官方给出的demo和开发文档来在百度地图上面做开发，最后我们将通过一个例子成功运行代码。
系列文章对百度第三方库的引用方式都是嵌入script标签的形式，对于vue-BMap等组件方式的使用不作为参考，但是方法实例是基本相同的。

二正文 1.百度地图使用介绍

百度地图 javascriptAPI
使用百度地图做开发的例子比比皆是，使用百度地图API，你可以在百度地图上绘制所需要的信息，比如画旗标，画边界，画路况图等，实现成功定制地图。

2.前期准备

引入文件：

使用百度地图库需要一个密钥，你可以到百度地图官网上去申请。
申请密钥

3.官网参考

3-1 DEMO
你可以在DEMO界面书写自己的代码，运行之后实时看到效果；也可以在此做调试，最后确定代码。
3-2 类参考
这里是全面的开发文档，百度地图支持的所有方法都可以从这里面找到。

4.创建实例

4-1. 创建html

  

  
  
  
百度地图

4-2. 设置容器样式

4-3. 创建地图实例

4-4. 完整文档

  

  
  
  
Hello, World

至此复制上面代码就可以在页面上看到地图了。

5.总结思考

有时候在引用

的时候会报错，不接受http方式的引用，这时候只需要把地址换成https协议就可以了：

三后记

通过本文，你成功把地图引入了你的开发页面。由于地图上的操作都是和传统的视图没有关系，所以那些UI框架基本上发挥不了它强大的视图绑定功能。在地图上的开发还都是以写JS逻辑为主。所以JS语法要加强学习哦～

云服务器 GPU云服务器百度地图百度地图百度地图标注百度地图导航

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92561.html

百度地图开发实例番外篇--实用方法（持续更新）

摘要：一前言在使用百度地图开发的过程中，查阅百度地图官网基本上就能满足开发的需求，但是有时候需要设置一些东西，很难在官网上查阅到相关的方法技巧。希望百度地图能够越来越强大，这样开发者就可以愉快的开发了一前言在使用百度地图开发的过程中，查阅百度地图官网demo基本上就能满足开发的需求，但是有时候需要设置一些东西，很难在官网上查阅到相关的方法技巧。笔者特意把开发过程中遇到的一些疑难杂症和解...

CocoaChina 2019-08-22 13:53 评论0 收藏0
第三方库

摘要：微信支付，支付宝支付，银联支付三大支付总结支付宝植入总结支付宝的植基于和百度地图的组件库基于百度地图封装的组件库，使用这个库最好需要先了解和百度地图。 Commento - 多说 & Disqus 开源替代品 Commento - 多说 & Disqus 开源替代品 anime.js 简单入门教程强大轻量的动画库 anime.js 入门教程来自B站的开源的MagicaSakura源...

seanHai 2019-08-22 13:58 评论0 收藏0
第三方库

摘要：微信支付，支付宝支付，银联支付三大支付总结支付宝植入总结支付宝的植基于和百度地图的组件库基于百度地图封装的组件库，使用这个库最好需要先了解和百度地图。 Commento - 多说 & Disqus 开源替代品 Commento - 多说 & Disqus 开源替代品 anime.js 简单入门教程强大轻量的动画库 anime.js 入门教程来自B站的开源的MagicaSakura源...

gityuan 2019-08-29 14:17 评论0 收藏0
vue 地图可视化（1）

摘要：百度地图百度地图作为项目中地图可视化最重要的一部分，不止其为国人自己的地图，还因为其完善的技术文档案例和多样化的开源插件等上有的组件可以直接使用，有兴趣的同学可以直接上手这里不采用已经封装好的地图组件，而是从零开始，采用原生的百度地图一百度地图百度地图作为项目中地图可视化最重要的一部分，不止其为国人自己的地图，还因为其完善的技术文档案例和多样化的开源插件（echarts、Mapv等...

1treeS 2019-08-22 16:08 评论0 收藏0