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

Example of the combination of AngularJS and Baidu Maps

高洛峰
Release: 2016-12-09 14:26:25
Original
1085 people have browsed it

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


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

and then html


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);   //开启鼠标滚轮缩放
Copy after login

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

Copy after login

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

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template