Web Front-end
JS Tutorial
How to make vue-baidu-map enter the page and automatically position it
How to make vue-baidu-map enter the page and automatically position it
This time I will show you how to make vue-baidu-map automatically position itself when entering the page, and vue-baidu-map enters the page to automatically position itself. What are the precautions? take a look.
Actually, I have been troubled by this problem before. I also checked online and couldn't find a solution. It wasn't until today that I took the liberty to raise an issue with the boss on GitHub, and it woke me up. In fact, it was because I was too eager for quick success and did not carefully read the reference documentation provided by vue-baidu-map. Or maybe I read it and then forgot about it! First of all, let’s be clear (original words from the document): Since the Baidu Map JS API only has one loading method: JSONP, the rendering of the BaiduMap component and all its sub-components can only be asynchronous. Therefore, please use the component's ready event to execute code that can only be executed after the map API is loaded. Do not try to call the BMap class in vue's ownlifecycle, let alone modify the model layer at these times.
Incorrect usage
I have tried it, and the above method seems to be feasible and the effect can be seen, but we'd better use the correct method provided by the author!Correct usage
This method is recommended! The following method to solve the problem of automatic positioning when entering the page is also here. The following is my writing method, for reference only. Please point out if there are any shortcomings, I am just a novice, haha! 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><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>How to use the vue component to implement the pop-up box click to show and hide
How to use the vue pop-up message component
The above is the detailed content of How to make vue-baidu-map enter the page and automatically position it. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to copy a page in Word
Feb 20, 2024 am 10:09 AM
Want to copy a page in Microsoft Word and keep the formatting intact? This is a smart idea because duplicating pages in Word can be a useful time-saving technique when you want to create multiple copies of a specific document layout or format. This guide will walk you through the step-by-step process of copying pages in Word, whether you are creating a template or copying a specific page in a document. These simple instructions are designed to help you easily recreate your page without having to start from scratch. Why copy pages in Microsoft Word? There are several reasons why copying pages in Word is very beneficial: When you have a document with a specific layout or format that you want to copy. Unlike recreating the entire page from scratch
How to quickly refresh a web page?
Feb 18, 2024 pm 01:14 PM
Page refresh is very common in our daily network use. When we visit a web page, we sometimes encounter some problems, such as the web page not loading or displaying abnormally, etc. At this time, we usually choose to refresh the page to solve the problem, so how to refresh the page quickly? Let’s discuss the shortcut keys for page refresh. The page refresh shortcut key is a method to quickly refresh the current web page through keyboard operations. In different operating systems and browsers, the shortcut keys for page refresh may be different. Below we use the common W
How to customize and edit standby mode on iPhone: What's new in iOS 17
Sep 21, 2023 pm 04:01 PM
Standby is a new feature in the iOS 17 update that provides a new and enhanced way to access information when your phone is idle quickly. With StandBy, you can conveniently check the time, view upcoming events, browse your calendar, get weather updates for your location, and more. Once activated, the iPhone will intuitively enter standby mode when set to landscape while charging. This feature is perfect for wireless charging points like your bedside table, or when you're away from your iPhone charging during daily tasks. It allows you to swipe through various widgets displayed in standby to access different sets of information from various applications. However, you may want to modify these widgets or even delete some based on your preferences and the information you need frequently. So let's dive into
How to enter safe mode in win7
Dec 26, 2023 pm 06:09 PM
win7 system is a very easy to use system. During the continuous use, many friends are asking how to enter safe mode in win7 system? Today, the editor will bring you a detailed tutorial with pictures and text on how to enter safe mode on a win7 computer. Let’s take a look. Graphical tutorial on how to enter safe mode in Windows 7: Method 1: Use shortcut keys to enter advanced startup items 1. Press the "F8" key repeatedly before booting to the Windows system startup screen, or hold down the "CTRL" key. In this way, we can enter the advanced startup options of the Windows system and choose to enter safe mode. Method 2: Set the boot to enter the advanced startup items 1. If the win7 system can start normally, you can use the Win key + R key combination to open the run box.
How to enter the bios setting interface on Lenovo desktop
Jul 14, 2023 pm 12:53 PM
Recently, many netizens have asked how to enter the bios of a Lenovo desktop computer and set up a U disk boot. I just bought a desktop computer to install the computer system and found that the prepared U disk boot could not be found. Let's talk to you about how to enter the Lenovo computer bios interface. . 1. First turn on the computer power. When the screen "Lenovo" appears on the computer screen, you will also see the following words "PressF2toSetup" in the lower left corner. At this time, quickly press the "F2" key on the keyboard to enter the BIOS settings. 2. Next, the computer will enter the hardware BIOS setting interface. 3. After we complete the BIOS settings of the computer, we can press "F10" on the keyboard to save the current configuration and exit the BIOS program. 4. Finally
Solution to the problem that Win10 has a black screen and cannot enter the desktop, but the mouse can still be moved
Dec 27, 2023 pm 01:41 PM
When we use a computer with the win10 operating system, if the computer has a black screen and only the mouse can move, don't worry. The editor thinks that most of this situation may be caused by a fault within the system, or because of a conflict with the driver of our system. You can try to use updates to upgrade the operating system, or reinstall the operating system and drivers to solve the problem. What to do if win10 has a black screen and cannot enter the desktop but the mouse can be moved. Method 1: 1. Hold down the Shift key and click "Restart" > Advanced Startup Options > Low Resolution Mode (or select low resolution mode after failing to start it for 3 times); 2. If During the installation program, press CTRL+SHIFT+F10, then system configuration, and then do
How to Rearrange, Disable, and Delete iPhone Home Screen Pages
Nov 29, 2023 am 08:22 AM
In iOS, Apple allows you to disable individual home screen pages on your iPhone. It's also possible to rearrange the order of home screen pages and delete pages directly instead of just disabling them. Here's how it works. How to Rearrange Home Screen Pages Touch and hold Space on the Home screen to enter jitter mode. Tap the row of dots that represent Home screen pages. In the Home screen grid that appears, touch and drag a page to rearrange it relative to other pages. Others move in response to your dragging. When you're happy with your new arrangement, tap "Done" in the upper right corner of the screen, then tap "Done" again to exit dither mode. How to Disable or Remove Home Screen Pages Touch and hold Space on the Home screen to enter dither mode. Tap to represent home screen
How to implement page jump in 3 seconds: PHP Programming Guide
Mar 25, 2024 am 10:42 AM
Title: Implementation method of page jump in 3 seconds: PHP Programming Guide In web development, page jump is a common operation. Generally, we use meta tags in HTML or JavaScript methods to jump to pages. However, in some specific cases, we need to perform page jumps on the server side. This article will introduce how to use PHP programming to implement a function that automatically jumps to a specified page within 3 seconds, and will also give specific code examples. The basic principle of page jump using PHP. PHP is a kind of
