这几天有这么一个需求，我在下面描述一下场景。
我要在一个后台系统中，让用户能在地图中点击对应的位置(需要地区搜索定位功能)，然后返回对应的经纬度给后台，后台存储完经纬度后，供小程序调用使用。小程序能够在地图组件中显示接口提供经纬度所对应的位置。然后小程序要获取当前用户所在的经纬度，然后算出接口提供经纬度所对应位置的距离。
-
怎么在html上面去引用地图第三方sdk
都说是引用第三方的sdk，那么很显然的，我们要去第三方平台去注册账号，然后申请密钥，再去使用功能。这里我们以百度地图的skd为例。
首先我们去百度地图官网注册账号密码，并且申请密钥，具体流程官网都有详细的介绍，我们在这就不多做赘述。
image.png
image.png
image.png
-----------以上就是获取密钥的方式了，不管是百度地图还是腾讯地图，方式都差不多
接下来我们怎么去html使用我们的第三方资源呢，请看下面
image.png
上面的script标签是官方的例子。我们直接使用script引用了第三方的资源，ak后面跟的就是我们申请的密钥了。后面的callback参数，跟的就是回调函数。
这里需要我们切记一点，就是我们需要在我们的body中添加标签
<div id="map"></div>
这个是因为，我们的地图都会渲染在我们的这个标签里面。我们设置标签的大小来达到控制地图大小的目的。其它的接口我们的官方开发文档上面都有写的很清楚，这里不多赘述。
这里我们说一个问题，那就是百度地图提供的坐标加密方式不用于谷歌地图或者腾讯地图。这说明一个问题，我们从百度地图上面获取的经纬度是不能直接使用的，我们需要通过方法进行转换，这里的话建议大家去百度上搜下，非常多。我这就不贴了，因为我也忘记出处是哪了。
还需要记住一点，就是一个地图你只能new一个对象出来(new BMap.Map('#xx')).因为一个对象对应着一个地图！对象不同，有可能你会发现操作失效(其实不是失效),这个问题在vue的使用中有可能你会碰到。
接下来我们看下如何在vue中使用地图的sdk
首先，我们在vue项目中的index.html去引用(cdn)
image.png
然后很重要的第二部，去配置文件里面配置参数
image.png
因为当你不去配置的时候，在我们去new地图对象时，我们的eslint会报错，说找不到这个东西。
然后，在你使用地图的那个组件页面中的mounted钩子中，开始用同样的方式去创建你的地图对象，方式同html。
接下来就是怎么在小程序中计算当前通过小程序获取的经纬度和接口提供经纬度的距离了，小程序获取经纬度就使用wx.getLocation接口就好了。至于距离计算公式，又请你去百度一下就知道了。
这里我说一个问题，就是你从接口拿到的经纬度的加密方式必须是同谷歌的，不能是百度的原坐标。不然计算出来的距离是不准确的(加密方式都不一样，算出来的肯定有问题啊)。
还有一点在下栽了很久的地方。那就是算距离的时候，请使用真机进行测试，因为开发者工具所提供的位置又偏差。刚开始不知道，花了四个小时找问题，简直......嗯。希望对大家有帮助。
网友评论