Baidu Map API quick to get started!!!

Today comes a new demand, that is, click on a person to appear on a map, on the map to mark the location of the man,

A requirement that sounds difficult, and has not been exposed to similar applications before,

Well, at last, we used an open source map API from Baidu,

The following words do not say much, or directly on the code bar,

For example, when a demand is clicked to view the map, a map appears indicating the current user's location,

The next step is to introduce the use of Baidu Map API,

Of course, since the use of other people's API so introduced.

<script type= "Text/javascript" src= "http://api.map.baidu.com/api?v=2.0&ak= Your Keys" ></script>

Here your key is you have to go to the official website to apply for a key,

$ ('. Lock '). Live (' click ', function () {//Lock Just a class is all I see in the map element, var x = $ (this). attr (' x ');//X, which represents longitude, is back in the background, I put it present no element on Var y = $ (this). attr (' y '); Ibid. var name = $ (this). attr (' name '); Ibid. var prov = $ (this). attr (' prov ')//Ibid. var padl = ($ ('. Cbody '). Width ()-$ ('. Map '). Width ())/2 + ' px '; $ ('. MapBox '). Show ()  ; This is my window to install the map, I have already left it in the page, of course you can also dynamically create LOADMAP (X,y,prov,name)//Run the following load map of the method}) $ ('. Mask '). Bind (' click ', Function ( ) {//. Mask is a mask for me, and when you click the Mask, the entire window of the map is hidden $ (this). Parent (). hide ();})  Loadmap = function (x,y,prov,name) {//load map x,y,prov,name Four parameters are the required parameters defined above (longitude x, latitude y is required) var map = new Bmap.map ("map"); New a map instance var point = new Bmap.point (x, y);  The incoming coordinates are the center of the map var marker = new Bmap.marker (point);              Create callout Map.addoverlay (marker);   Add a callout to the map map.centerandzoom (point); Map.enablescrollwheelzoom ();    Enable wheel zoom to zoom out map.enablecontinuouszoom (); Enable map Inertia drag var opts = {width:100,//Information window width height:50,//Information window height title: "User:" +name,//Information window title Enableme Ssage: False}var Infowindow = new Bmap.infowindow ("City:" + Prov, opts); Create an Information Window object Map.openinfowindow (infowindow,point); Open Information Window}

　　

Well, the code is written here, and finally, let's look at the final effect.

Simply, don't try it yourself!!!

Baidu Map API quick to get started!!!