Because it was used in a recent project, I sorted out some pits I encountered.
I wrote a class library to encapsulate the commonly used functions: https://github.com/iRuxu/iBMap
Quick Documentation Links
1.1 Javascript API
If you first call up the Baidu map by yourself, you need to introduce the corresponding API file on the page, such as using 2.0:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
For related use, please refer to the first related link at the beginning of the text.
{Pit 1} It cannot be loaded asynchronously on some browsers and will be blocked, so it is still necessary to import the api file directly into the page.
{Pit 2} Some examples in the official demo seem to be invalid. For example, the address resolution method is no longer available, and an error will be reported. The result needs to be retrieved asynchronously through the Web API.
The internal construction methods such as Point are all first lng longitude and then lat latitude .
The invocation of the interface method needs to be done after the page document is ready, otherwise a map rendering error will occur.
1.2 Web API
The provided interface refers to the second link at the beginning of the article, based on which it returns some data used by the javascript API and sdk.
{Pit 3} If positive geocoding is performed, it is worth noting that when using jquery to initiate an Ajax request, the data-type must be specified as jsonp, otherwise it cannot be returned normally .
Since it is cross-domain/jsonp and cannot be processed synchronously, the next operation must be performed in the callback.
1.3 URI API
The URI interface can directly and quickly call up the map and return an html page, so it can be directly embedded in the iframe.
If you don't need multiple punctuation of your choice and some advanced features, this is the fastest method and doesn't require ak.
For related use, please refer to the third link at the beginning of the text.
It is worth noting that the geographic value of the URI is lat latitude followed by lng longitude .
{Pit 4} In addition, if your map is opened through a pop-up window, that is, if the container loaded by the map is not rendered by default (for example, display:none is set), the map cannot be loaded normally.
Alternative solution:
a. Set fixed positioning, and set a larger offset value, such as margin: 5000px, and then correct the position when triggered
b. Set transform:scale3d(0,0,0), scale it to 0 by default, and restore it to normal after triggering transform:sacle(1,1,1), you can also have a scaling animation effect. (But only using this bar, when the page is just opened, there will be a shrinking animation, so it still needs to be offset to the outside of the visible area first, which can be combined with the first bar)
c. According to the specific test, overflow:hidden can also render the map normally, but usually you have to set the size to 0. When loading the map, the position of the marker may be wrong.
So much for now.