Use of Baidu map js and Baidu map js

Use of Baidu map js and Baidu map js
Display map and location information on the webpage. You can use Baidu map. See http://developer.baidu.com/map/index.php? Title = jspopular/guide/introduction
1. Get the key and secret key to be used in js reference of Baidu map api. My key is 127fi2f04wxavuwmgu8fn49kl1234567890.

<Script src = "http://api.map.baidu.com/api? V = 1.5 & ak = your key "type =" text/javascript "> </script>

2. Place the <div> container with the specified id in html

<div id="baiduMap"></div>

3. Set css

Html, body {width: 100%; height: 80%;}/* both html and body cannot be less */# baiduMap {width: 100%; height: 80%; overflow: hidden; margin: 0.1em ;}

4. Compile js Code

Function baiduMap () {var map = new BMap. map ("baiduMap"); // allmap is the idvar point of the div label = new BMap. point (121.421088, 31.20956); // coordinates of the yan'an West Road campus of Donghua University-Longitude and latitude map. centerAndZoom (point, 16); // The point-centric scaling level is 16var navigationControl = new BMap. navigationControl (); map. addControl (navigationControl); // Add a navigation control to achieve drag, translation, and scale map. enableScrollWheelZoom (true); // allows the mouse wheel to zoom in and out var scaleControl = new BMap. scaleControl (); map. addControl (scaleControl); // Add the scale display control var marker = new BMap. marker (point); // creates a map annotation. addOverlay (marker); // Add the annotation to the map marker. setAnimation (BMAP_ANIMATION_BOUNCE); // specifies the animation var label = new BMap. label ("here I am", {// offset between TAG content and tag offset: new BMap. size (20,-10)}); marker. setLabel (label );}

Effect