Baidu API map is not displayed in the middle, but in the upper left corner. What's the matter? Resolved!

Baidu map was introduced into the project , Run to find that the position of the dimension is offset ？

According to the principle, it is located according to the coordinates , Why did you run to the upper left corner , At first, I couldn't understand it .

I don't say much nonsense , Code that can be handled directly .

Just join this line ：map.panBy(580, 150);

//map.panBy(580, 150);
// The first parameter is the width 
// The second parameter is height 
// Basic settings for you  id = "allmap"  Of div Half of , It's in the middle .


<script type="text/javascript">

    //  Baidu Maps API function 
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(114.236412,22.691258);
    map.centerAndZoom(point, 18);
    map.enableScrollWheelZoom(true);     // Turn on mouse wheel zoom 
    var marker = new BMap.Marker(point);  //  Create annotations 
    map.addOverlay(marker);               //  Add annotations to the map 
    marker.setAnimation(BMAP_ANIMATION_BOUNCE); // Dancing animation 
    //  Add navigation control with positioning 
    var navigationControl = new BMap.NavigationControl({
        //  In the upper left corner 
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE type 
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        //  Enable display positioning 
        enableGeolocation: true
    });
    map.addControl(navigationControl);
    // Solve the problem that dimension points are not centered 
    map.panBy(580, 150);// How many pixels is the center point offset （width,height） by div  Wide and high 1/2;

</script>

 

 

Perfect solution ！ salute , And the flower .