vue中使用百度地图,vue 百度地图 移动端

　　本文主要介绍Vue利用百度地图实现城市定位。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享Vue使用百度地图实现城市定位的具体代码，供大家参考。具体内容如下。

　　Vue项目运行环境：Vue 2.0，Vue Cli 3.0

　　步骤一：登录百度地图开放平台

　　在控制台-应用管理-我的应用下创建应用。

　　目的是获得ak。

　　步骤二：在公用文件夹的index.html文件里。

　　导入百度地图，拼你的ak。

　　步骤三：在项目的根目录下创建vue.config.js文件

　　如果有vue.config.js文件，只需添加以下代码。

　　vue.config.js之后，默认情况下不再创建VueCli 3.0文件。当使用这个文件时，我们需要手动创建它。

　　模块.导出={

　　configureWebpack: {

　　外部：{

　　BMap: BMap //百度地图配置

　　}

　　}

　　}

　　步骤四：接下来就是具体的代码实现了。

　　接下来，将介绍两种实现方案。

　　方法一(推荐):单独打包js工具文件，实现地址获取。

　　1.在src文件夹下新建一个util文件夹，然后在util文件夹下新建一个getUserLocation.js文件。

　　注意：这个util文件夹可以存储所有的自打包工具js文件，而不仅仅是getUserLocation.js，一个定位相关的文件。

　　并且代码截图如下：

　　//获取当前城市

　　const getCurrentCityName=function(){

　　返回新承诺((解决，拒绝)={

　　让myCity=new BMap。local city()；

　　myCity.get((结果)={

　　设geoc=new BMap。geocoder()；

　　geoc.getLocation(result.center，(rs)={

　　//rs携带所有的定位信息，这里只获取所在的城市和区。

　　let add comp=RS . address components；

　　let result=add comp . city add comp . district；

　　解决(结果)；

　　});

　　}，{ enablehigaccuracy:true })；

　　});

　　}

　　导出默认的getCurrentCityName

　　在组件中引入并调用上述文件中封装的方法。

　　方式一：工具文件简介

　　位置信息可以通过页面locationMsg属性显示，例如：北京市丰台区。

　　方式二：直接在装配中定位。

　　直接在组件中使用下面的代码可以成功定位，这比第一种方法花费的时间要长。

　　并且代码截图如下：

　　已安装(){

　　//获取位置信息

　　this . get city()；

　　},

　　方法：{

　　getCity() {

　　const getLocation=new BMap。地理位置()；

　　var _ this=this

　　get location . getcurrentposition((position)={

　　//position存储所有定位数据。

　　console.log(位置)；

　　//此处获取城市和省份。

　　let city=position . address . city；

　　let省=position . address . province；

　　_this.locationMsg=省市；

　　}, ()={

　　_this.locationMsg=定位失败！；

　　}，{提供商：百度 })；

　　}

　　}

　　代码图

　　注意：_这里其实没必要。可以直接用这个。在使用箭头函数之前，您使用了_this。后来改成箭头函数后，没有修改_this相关的代码。当然，按照上面的代码写是没有问题的。

　　毫不奇怪，您可以通过locationMsg属性获得组件中的位置信息。

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。