js调取百度地图，展示公司位置

首先引用百度地图js

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

界面定义div 主要注意id

 <div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div>

 引用初始化百度api

<script>
   $(function(){

//新建一个地图上点
var points = [
    {"lng":    116.29375 ,"lat":  39.837923 ,"url":"http://www.xinruihy.com/"  ,"id":"信睿浩扬",   "name":"北京市时代财富天地"}
];
//116.29375,39.837923
//创建标注点并添加到地图中
function addMarker(points) {
    //循环建立标注点
    for(var i=0, pointsLen = points.length; i<pointsLen; i++) {
        var point = new BMap.Point(points[i].lng, points[i].lat); //将标注点转化成地图上的点
        var marker = new BMap.Marker(point); //将点转化成标注点
        var label1=points[i].name;
        var label = new BMap.Label(label1, {offset: new BMap.Size(15, -25)});
        marker.setLabel(label);
        map.addOverlay(marker);  //将标注点添加到地图上
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        //添加监听事件
        (function() {
            var thePoint = points[i];
            marker.addEventListener("click",
                function() {
                    showInfo(this,thePoint);
                });
        })();
    }
}
function showInfo(thisMarker,point) {
    //获取点的信息
    var sContent =
        '<ul style="margin:0 0 5px 0;padding:0.2em 0">'
        +'<li style="line-height: 26px;font-size: 15px;">'
        +'<span style="width: 50px;display: inline-block;">名称：</span>' + point.id + '</li>'
        +'<li style="line-height: 26px;font-size: 15px;">'
        +'<span style="width: 50px;display: inline-block;">地址：</span>' + point.name + '</li>'
        +'<li style="line-height: 26px;font-size: 15px;"><span style="width: 50px;display: inline-block;">查看：</span><a href="'+point.url+'">详情</a></li>'
        +'</ul>';
    var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口对象
    thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow
}

//创建地图
var map = new BMap.Map('container');
map.centerAndZoom(new BMap.Point(116.29375,39.837923), 14);  // 设置中心点
map.setCurrentCity("朝阳区");          //设置为
map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom(true);
addMarker(points);

   })
</script>

 

 

其他相关详细配置可查考https://www.cnblogs.com/zqzjs/p/5293698.html