百度地图

js部分 

$(function () {
    var aboutUs = {
        init: function () {
            this.methods();
        },
        methods: function () {
                var map = new BMap.Map("dituContent");// 创建Map实例
                var point = new BMap.Point(113.941927,22.549145);//定义一个中心点坐标
                map.centerAndZoom(point, 18);

                var marker = new BMap.Marker(point);  // 创建标注
                map.addOverlay(marker);// 将标注添加到地图中
                map.enableScrollWheelZoom(true); // 缩放
                map.addControl(new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT})); // 缩略图
            // 地图标注点信息1
                var opts = {
                    width: 200,
                    // height: 80,
                    title: ''
                }
                var infoWindow = new BMap.InfoWindow("" , opts);  // 创建信息窗口对象
                marker.addEventListener("click", function () {
                    // map.openInfoWindow(infoWindow, point);
                });
                // 添加带有定位的导航控件
                var navigationControl = new BMap.NavigationControl({
                    // 靠左上角位置
                    anchor: BMAP_ANCHOR_TOP_LEFT,

// BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角。 
// BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角。 
// BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角。 
// BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角。



                    // LARGE类型
                    type: BMAP_NAVIGATION_CONTROL_LARGE,

//BMAP_NAVIGATION_CONTROL_LARGE 表示显示完整的平移缩放控件。 
//BMAP_NAVIGATION_CONTROL_SMALL 表示显示小型的平移缩放控件。 
//BMAP_NAVIGATION_CONTROL_PAN 表示只显示控件的平移部分功能。 
//BMAP_NAVIGATION_CONTROL_ZOOM 表示只显示控件的缩放部分功能。
                    // 启用显示定位
                    enableGeolocation: true
                });
                map.addControl(navigationControl);
        },
    }
    aboutUs.init();
})

html部分

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&s=1"></script>
<div class="mpas" id="dituContent"></div>

百度地图官方api  http://lbsyun.baidu.com/index.php?title=jspopular