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!