Home  >  Article  >  Web Front-end  >  Example of the combination of AngularJS and Baidu Maps

Example of the combination of AngularJS and Baidu Maps

高洛峰
高洛峰Original
2016-12-09 14:26:251052browse

A project I am working on now is angular, but I introduced js by directly referencing Baidu Map, and wrote html and js code. I found that I went and reported an error. I thought at first that there was a conflict between Baidu Map and angular, and then I went to search and found that angular also has a Baidu map plug-in. Unfortunately, I used it and reported an error. It said on the Internet that you need to use the angular2 version to be compatible, but I didn’t know how to download the 2 version, so I gave up. Then, I I went to solve the mistake I made at the beginning, and found that I was stupid. First, let’s talk about how to use Baidu Maps. It’s very simple. First, introduce js

2fb9b43e152bf972483f7286c00a6f072cacc6d41bbb37262a98f745aa00fbf0


Explain that you can find the secret key on Baidu Map’s api official website Apply

and then html

4fda439add4228567aa1d2a1810ddfe016b28748ea4df4d9c2150843fecfba68


Then when you get there, just go to the js code. In fact, all of these APIs are available, but I'll post them anyway

var map = new BMap.Map("map");  // 创建Map实例
        map.centerAndZoom(new BMap.Point(115.864528, 28.687675), 11); // 初始化地图,设置中心点坐标和地图级别
        map.addControl(new BMap.MapTypeControl());  //添加地图类型控件
        map.setCurrentCity("南昌");     // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);   //开启鼠标滚轮缩放

I used these js codes behind the body at first, but an error was reported. What’s wrong? Post it

getscript?v=2.0&ak=your secret key&services=&t=20160928173929:1 Uncaught

TypeError: Cannot read property 'fc' of undefined


Well, this error occurred, let me go, the solution to this error is very simple

Just put the js code under the div where you use the map, and paste the code

That’s it, no error was reported, and the map was presented perfectly. Let me go. In the final analysis, I was too stupid. I thought there was a conflict with angular. Then I thought about it, it’s impossible, and then I didn’t research the Baidu plug-in for angular

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn