Angular/vue calls Baidu map + do not display icons for annotation points + calculate map center locations for multiple annotation points

Source: Internet
Author: User

Sort it out ~


1. Call Baidu map in vue

First of all, you need to apply for a Baidu key (very simple, not to mention)

1、introduce Baidu map javascript API interface in the index.html file:

<SCRIPT type = "text/JavaScript" src = " V = 2.0 & aK = Key "> </SCRIPT> 2. In bulid/webpack. base. conf. configure bmap In the JS configuration file. exports and entry level

3. Import bmap in the map component:

Import bmap from 'bmap'

4. Create a container to display Baidu maps.

5. There is also a good map Generator for white rabbit, which can meet basic requirements. I haven't used the standard route or the like. I haven't used it here.


This generator can generate code with some comments, which are clear at a glance. But I will introduce it more.


2. Call Baidu map in angular

This example introduces the Baidu map javascript API interface in the index.html file. I will not talk much about it.


The following is a record of the problem:

1. Do not display the marked point icon

That is, the annotation point is displayed in the map, but the green drop mark is not displayed. The code in the generator mainly includes the following lines:



I checked it. The reason is that the image address is incorrect. It will be correct after the image address is changed.

The image address is displayed as follows:


 2. Another major problem is that the Code has a central point latitude and longitude. After the central point latitude and longitude are set, some annotation points may not be displayed in the container range.

Add the following method:

Function getzoom (maxlng, minlng, maxlat, minlat) {var zoom = ["50", "100", "200", "500", "1000", "2000 ", "5000", "10000", "20000", "25000", "50000", "100000", "200000", "500000", "1000000 ", "2000000"] // levels 18 to 3. VaR pointa = new bmap. point (maxlng, maxlat); // create the coordinate a var pointb = new bmap. point (minlng, minlat); // create point coordinate B var distance = map. getdistance (pointa, pointb ). tofixed (1); // get the two-point distance, retain the two digits after the decimal point for (VAR I = 0, zoomlen = zoom. length; I <zoomlen; I ++) {If (zoom [I]-distance> 0) {return 18-I + 2; // 3 more, this is because the MAP range is often more than 10 times the scale distance. So the level will increase by 3. }};} Function setzoom (dataarr) {var lnglat = [{LNG: "", Lat: ''}]; If (dataarr. length> 0) {console. log ('lll') lnglat [0]. lng = dataarr [0]. point. split ("|") [0]; lnglat [0]. lat = dataarr [0]. point. split ("|") [1]; console. log (lnglat [0]. LNG); var maxlng = lnglat [0]. LNG; var minlng = lnglat [0]. LNG; var maxlat = lnglat [0]. lat; var minlat = lnglat [0]. lat; var res; console. log ('aaabbbb ') for (VAR I = dataarr. length-1; I> = 0; I --) {console. log ('arr') lnglat [0]. lng = dataarr [I]. point. split ("|") [0]; console. log (lnglat [0]) lnglat [0]. lat = dataarr [I]. point. split ("|") [1]; Res = lnglat [0]; If (res. LNG> maxlng) maxlng = res. LNG; If (res. LNG <minlng) minlng = res. LNG; If (res. lat> maxlat) maxlat = res. lat; If (res. lat <minlat) minlat = res. lat ;}; console. log ('dffdsssdf ') var cenlng = (parsefloat (maxlng) + parsefloat (minlng)/2; var cenlat = (parsefloat (maxlat) + parsefloat (minlat)/2; vaR zoom = getzoom (maxlng, minlng, maxlat, minlat); map. centerandzoom (New bmap. point (cenlng, cenlat), zoom);} else {// No coordinates, show all China map. centerandzoom (New bmap. point (103.388611, 35.563611), 5 );}}

Then, you can calculate the center point and zoom degree. If the point is too many, there is no problem.

This is some of my current map adjustment records. The code will not be introduced here line by line. Baidu map API open documentation contains a lot of information ~

Address paste below, also convenient my own future review: Title = jspopular



Angular/vue calls Baidu map + do not display icons for annotation points + calculate map center locations for multiple annotation points

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.