Examples of AngularJS and Baidu map integration, and angularjs instances

Examples of AngularJS and Baidu map integration, and angularjs instances

I am working on an angular project, but I used the direct reference of Baidu map to introduce js, write html and js Code, and found that I went there and reported an error, I initially thought that Baidu map had a conflict with angular. Then I went to search for it and found that angular also had a Baidu map plug-in, but I used it to report an error, it is said on the Internet that angular2 can be used for compatibility, but I will not download version 2, so I gave up. Then, I fixed my first error and found that, madd: I am so stupid. First of all, let's talk about how to use Baidu map. It's very simple.

First introduce js

<Script type = "text/javascript" src = 'HTTP: // api.map.baidu.com/api? V = 2.0 & ak = your key '> </script>

Note: You can apply for the key on the Baidu map api website.

Then html

<Div id = 'map'> </div>

Then, the js Code will be sent directly. In fact, all these APIs are available, but I will paste them here.

Var map = new BMap. map ("map"); // create a Map instance map. centerAndZoom (new BMap. point (115.864528, 28.687675), 11); // initialize the map and set the coordinates of the center and map level. addControl (new BMap. mapTypeControl (); // Add map control map. setCurrentCity ("Nanchang"); // set the map to display the city. This is a required map. enableScrollWheelZoom (true); // enable scroll wheel Scaling

I used these js codes after the body at the beginning, but I reported an error. What is the error? post it.

Getscript? V = 2.0 & ak = your key & services = & t = 20160928173929: 1 Uncaught

TypeError: Cannot read property 'fc 'of undefined

If this error occurs, I will go. The solution to this error is very simple.

Put the js Code under the div where you use the map and paste the code

<Div id = 'map'> </div> <script type = "text/javascript"> var map = new BMap. map ("map"); // create a Map instance map. centerAndZoom (new BMap. point (115.864528, 28.687675), 11); // initialize the map and set the coordinates of the center and map level. addControl (new BMap. mapTypeControl (); // Add map control map. setCurrentCity ("Nanchang"); // set the map to display the city. This is a required map. enableScrollWheelZoom (true); // enable scroll wheel scaling </script>

In this way, no error is reported, and the map is perfectly displayed. I am going to, after all, I am too stupid. I thought there was a conflict with angular. Then I thought it was impossible, then I didn't research the Baidu plug-in of angular...

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!