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

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 = "http://api.map.baidu.com/api? 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.

Http://api.map.baidu.com/lbsapi/creatmap/index.html

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:

Http://api.map.baidu.com/lbsapi/creatmap/images/us_mk_icon.png

 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: http://lbsyun.baidu.com/index.php? Title = jspopular

 

 

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