通过百度地图API绘制经纬度map

亦凉 2022-06-11 04:57 417阅读 0赞

通过百度的API来绘制经纬度map相比自己算坐标绘图来说，效率提升的不是一点半点，而且也符合多数人的使用习惯（应该有不少同学都用过百度地图查询信息），接下来不废话，先看一下效果图：

![20170731111947771][]

功能很简单，在百度地图上根据经纬度显示坐标以及其附加信息。接下来看一下代码：

baidu.html

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge;chorme=1;" />
        <meta http-equiv="content-type" content="text/html,charset=utf-8" />
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=01m42aiQzM65piq3VA5AGY1VjiYG8d0K"></script>
        <script type="text/javascript" src="baidu.js"></script>
    </head>
    <body>
    	<input type="button" value="show" οnclick="show()">
    	<div id="chart-container"></div>
    </body>
    </html>

baidu.js

show函数中的points数组就是显示所需的坐标信息和提示信息，L表示经度，B表示纬度，其他属性可以根据项目业务需要自定义，但是必须与showInfo函数的解析保持一致。另外，经纬度的精确度也需要注意，如果只给一个整型的经纬度，是无法像例子里那样精确显示的（即放大后会存在误差）。

js里调用百度地图的函数都作了简单说明，如果要看详细的函数用法和参数类型请移步查阅 [百度地图API][API]。下面着重说明一下html中引用API的部分，即下面这句：

http://api.map.baidu.com/api?v=2.0&ak=01m42aiQzM65piq3VA5AGY1VjiYG8d0K

这是百度地图API的引用声明，同时也是权限校验。url中的ak针对每个应用都是不同的（例子中的ak可用是由于笔者申请的这个ak白名单是空的），所以各位同学如果要在项目中调用百度地图API一定要把ak换成自己申请的ak，申请地址（申请前需要注册一个百度用户）： [申请ak][ak]，申请完成页面如下：

![20170731140931906][]

笔者介绍功能的map例子内容非常简单，只能算是入门引导，很多高级功能并没有使用说明，另外，使用了百度地图API，相当于在微信平台开发的小程序，是受到平台限制的（比如部分API会有单日访问数量限制和每分钟并发量限制），如果平台改一改游戏规则，你的应用必须遵守，否则轻一点封了你的应用id，严重一点封了你的用户，简而言之，就是脖子会被平台卡，所以各位同学在设计阶段要考虑清楚这一点。

[20170731111947771]: /images/20220611/19d7ab598e26412c9d0e41a0034f9a09.png
[API]: http://developer.baidu.com/map/reference/index.php
[ak]: http://lbsyun.baidu.com/apiconsole/key
[20170731140931906]: /images/20220611/4e97fc9f30d947d58b12118ab38fc1a0.png