vue-baidu-map 进入页面自动定位的解决方案！

妖狐艹你老母 2022-05-26 06:55 292阅读 0赞

文章中的提到可能会有不足之处，欢迎指出！

在此之前也被这问题困扰过，在网上也查了一番，没找到解决方法。直到今天，在 [GitHub][] 冒昧地向大佬提了一个 issue，才点醒了我。其实是因为太过急功近利了，没有认真阅读 vue-baidu-map 提供[参考文档][Link 1]，也有可能是看过然后忘记了！

首先要明确一点（[文档原话][Link 1]）：**由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。**  
![错误用法][1240]  
我试过，以上这种方法好像是可行，效果可以出来，但我们最好采用作者提供的正确方法！  
![正确用法][1240 1]  
推荐这种方法！那下面解决进入页面自动定位的方法也是在这里。  
下面是我的写法，仅供参考，有不足请指出，我只是一个小白，哈哈！

Template：

<template>
    	<baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" @load="loadding" :scroll-wheel-zoom="true"
    		:mapStyle="{styleJson: styleJson}">
    		<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="false" :autoLocation="true"
    			:locationIcon="{url: require('../../svg/location.svg'), size: {width: 18, height: 18}}" 
    			@locationSuccess="getLoctionSuccess" @locationError="getLocationError">
    		</bm-geolocation>
    		
    		<bm-marker :position="autoLocationPoint"
    			:icon="{url: require('../../svg/location.svg'), size: {width: 18, height: 18}}" v-if="initLocation">
    		</bm-marker>
    	</baidu-map>
    </template>

JS实现：

<script>
    	export default {
    		data () {
    			return {
    				// 省略一部分
    				autoLocationPoint: {lng: 0, lat: 0},
    				initLocation: false,
    			}
    		},
    		methods: {
    			handler ({BMap, map}) {
    				let _this = this;	// 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
    				var geolocation = new BMap.Geolocation();
    				geolocation.getCurrentPosition(function(r){
    					console.log(r);
    					_this.center = {lng: r.longitude, lat: r.latitude};		// 设置center属性值
    					_this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};		// 自定义覆盖物
    					_this.initLocation = true;	
    					console.log('center:', _this.center)	// 如果这里直接使用this是不行的
    				},{enableHighAccuracy: true})
    				
    				// 下面注释是百度地图API官方实现方法，因为我使用自定义图标覆盖物，所以没有使用这种方法！
    				// 如使用以下这种方法，那么我Template里所写的自定义定位图标代码是不需要的
    				// var geolocation = new BMap.Geolocation();
    				// geolocation.getCurrentPosition(function(r){
    				// 	if(this.getStatus() == BMAP_STATUS_SUCCESS){
    				// 		var mk = new BMap.Marker(r.point);
    				// 		map.addOverlay(mk);
    				// 		map.panTo(r.point);
    				// 		alert('您的位置：'+r.point.lng+','+r.point.lat);
    				// 	}
    				// 	else {
    				// 		alert('failed'+this.getStatus());
    				// 	}
    				// },{enableHighAccuracy: true})
    			}
    		}
    	}
    </script>

如果是直接复制代码的朋友请注意，要有选择的复制，因为我没有把全部代码贴出了，直接复制到你的项目是会出问题的！不过这代码比较简单，稍微就能看懂！

[GitHub]: https://github.com/Dafrok/vue-baidu-map
[Link 1]: https://dafrok.github.io/vue-baidu-map/#/zh/start/usage
[1240]: /images/20220526/999a6bf6bd194153b9f340824290c198.png
[1240 1]: /images/20220526/97e6a5b0f5dd4e469945a09dcefc24ac.png

发表评论取消回复

表情：

评论列表（有 0 条评论，292人围观）

还没有评论，来说两句吧...

相关阅读

相关 MySQL表结构自动更新失败：问题定位及解决方案

在 MySQL 中，如果设置的触发器或者事件（例如 AUTO_INCREMENT 或者表结构变更）未能自动更新表结构，可能的原因和解决方法如下： 1. **触发器问题**：

「爱情、让人受尽委屈。」/ 2025年02月20日 06:18/ 0 赞/ 62 阅读

相关文章页面目录自动生成方案

![format_png][] 一、前言前两天项目遇到一个需要给页面添加大纲导航的功能，要求把页面中的特定标签加入到大纲导航中。类似这样： ![forma

刺骨的言语ヽ痛彻心扉/ 2022年12月25日 12:57/ 0 赞/ 280 阅读

相关关于输入框按回车自动刷新页面的4个解决方案

现象：el-input在绑定@keypress.enter.native后，第一次回车时会刷新页面，后面在回车就不会了。原因： > W3C 标准中有如下规定： When

曾经终败给现在/ 2022年10月26日 14:29/ 0 赞/ 541 阅读

相关双系统直接进入grub不能进入ubantu解决方案

双系统直接进入grub不能进入ubantu解决方案参考文章： [（1）双系统直接进入grub不能进入ubantu解决方案][1_grub_ubantu] （2）http

古城微笑少年丶/ 2022年09月13日 14:28/ 0 赞/ 237 阅读

相关 vue-baidu-map 进入页面自动定位的解决方案！

文章中的提到可能会有不足之处，欢迎指出！在此之前也被这问题困扰过，在网上也查了一番，没找到解决方法。直到今天，在 [GitHub][] 冒昧地向大佬提了一个 issue，才

妖狐艹你老母/ 2022年05月26日 06:55/ 0 赞/ 293 阅读

相关 ionic3 ion-input进入页面自动获取焦点

本文首发于2018-4-23 [https://segmentfault.com/a/1190000014357947][https_segmentfault.com_a_11

本是古典何须时尚/ 2022年03月26日 07:19/ 0 赞/ 371 阅读

相关使用Apollo Client设置缓存交互方式，实现进入页面自动刷新

在前面的文章中描述了`cache`在`react native`中的作用。[React Native项目使用react-apollo实现更新缓存的两种方式][React Nat

秒速五厘米/ 2022年03月16日 09:26/ 0 赞/ 533 阅读

相关关于输入框按回车自动刷新页面的4个解决方案

起因最近加入了一套回车自动查询的方法，好几个界面都加好了，可是就是有一个界面的回车事件总是不生效并且似乎还自动刷新了整个界面。 $("input[nam

怼烎@/ 2022年03月02日 09:50/ 0 赞/ 983 阅读

相关 VS 点击页面自动定位到解决方案资源管理器目录位置

点击工具→选项→项目和解决方案：勾上“在解决方案资源管理器中跟踪活动项”。 ![Center][] 转载于:https://www.cnblogs.com/bdqczh

偏执的太偏执、/ 2021年11月10日 04:12/ 0 赞/ 359 阅读

相关解决Button自动刷新页面的问题

一、问题 <button class="am-btn am-btn-default am-btn-xs am-text-secondary" data-id="9

拼搏现实的明天。/ 2021年09月12日 05:26/ 0 赞/ 555 阅读