Here is the official guide of baidu map api to display a map, but it does not work if you copy paste it into your web page.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Baidu Map </title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E4805d16520de693a3fe707cdc962045"></script> </head> <body> <script> var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); map.enableScrollWheelZoom(true); </script> </body> </html>
In your browser’s web developer console, you will see the error:”TypeError: this.K is undefined”. In fact, the examples included in that baidu map api tutorial are not complete. To display a map on a web page, you should define an area first, then use baidu map api to display a map in that area:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Baidu Map </title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E4805d16520de693a3fe707cdc962045"></script> </head> <body> <div id="container"></div> <script> var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); map.enableScrollWheelZoom(true); </script> </body> </html>
In the modified example, we define a <div> element whose id is “container” , then specify that id in the construction function of the map object of baidu map api. The constructor of the map object is BMap.Map. You may need to be familiar with this kind of object construction function, i.e.,a method of an existing object. Don’t confuse it with the class name in a namespace if you are a C++ programmer. BMap.Point constructs an object according to given latitude and longitude. The second parameter of centerAndZoom is zoom level. The minimum zoom level is 3, and the maximum zoom levelĀ is 19. The created map is centered around the point given as the first parameter. Let’s see the effects of the max(19) and min(3) zoom level.


Here, I do not want you to remember what on earth a specific zoom level looks like, but want you to know that the bigger the zoom level is, the more stuff the map can display in a given area on the web page, and the less area it represents in the real world. The last line of the javascript code is used to enable the mouse wheel to zoom in/out the map so you can see more or less of the real world in the map.
You can see baidu map api is not very difficult to use. With several lines of js code, you can display a map on your web page. Cool, isn’t it?
Comments are closed, but trackbacks and pingbacks are open.