Angular and Baidu map of the combination of instance code _ANGULARJS

Source: Internet
Author: User

I now do a project is angular, but I use the direct reference Baidu map method to introduce JS, write Html,js code, found, I went, the error, I initially thought is Baidu Map and angular conflict, and then I went to search Ah, Found angular also has a Baidu map plugin, but I used the error, online said to use ANGULAR2 version to be compatible, but I will not download 2 version, so I gave up, and then, I went to solve my first mistake, first of all, Baidu map How to use it, very simple, On the Code

First to introduce JS

<script type= "Text/javascript" src= ' http://api.map.baidu.com/api?v=2.0&ak= your secret key ' ></script>

Explain, secret key you can in Baidu Map API website Application ha

Then HTML

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

And then to the direct JS code, in fact, all of these APIs have all, but I still posted it

var map = new Bmap.map ("map"); Create a Map instance
map.centerandzoom (new Bmap.point (115.864528, 28.687675), 11);//initialize maps, set center point coordinates and map level
Map.addcontrol (New Bmap.maptypecontrol ()); Add Map Type Control
map.setcurrentcity ("Nanchang");//Set the city to display the map this entry is
Map.enablescrollwheelzoom (true) that must be set;//Turn on mouse wheel zoom

These JS code I started with the body behind, but the error, what is wrong, paste

Getscript?v=2.0&ak= your secret key &services=&t=20160928173929:1 uncaught
typeerror:cannot Read Property ' FC ' of undefined

Well, it's a mistake, I'm going, the wrong solution is simple.

is to put the JS code in your map with the div below, paste 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 maps, set center point coordinates and map level
Map.addcontrol ( New Bmap.maptypecontrol ()); Add Map Type Control
map.setcurrentcity ("Nanchang");//Set the city to display the map this entry is
Map.enablescrollwheelzoom (true) that must be set;//Turn on mouse wheel zoom
</script>

In this way, there is no error, the map is also perfect present, I go, in the final analysis or I was too stupid, I thought it was really angular conflict, and then on a think, impossible ah, and then did not go to the angular of that Baidu plug-in where the specialized research ...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.