这里我用的是百度地图的api

 

首先要引入百度地图的api

 

我用的是这个：

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

 

之后就开始创建地图

var map = new BMap.Map("mapContainer");// 创建地图实例  mapContainer为地图显示div的id名
var point = new BMap.Point(longitude ,latitude );  // 创建点坐标   longitude,latitude为经纬度
map.centerAndZoom(point, 18);  //第一个参数是以刚才的点为中心创建地图，第二个参数是地图缩放级别，从小到大为0-19
map.enableScrollWheelZoom(true);  //利用鼠标滚轮控制大小   另外也可以使用map.setZoom()方法主动控制地图放大缩小
                 
var myIcon = new BMap.Icon("../upload/images/2019/12/mapLocation.png", new BMap.Size(29, 42));    // 设置中心点图片  第一个参数为中心点地标图片，第二个参数为该图片大小
var marker = new BMap.Marker(point,{icon: myIcon});   
var infoWindow = new BMap.InfoWindow("详细信息：" + "<br><br>" + totalAddress);  //弹出窗口
marker.addEventListener("click", function(){           
      this.openInfoWindow(infoWindow);        
});
map.addOverlay(marker);
map.panBy(600, 250);   //设置中心点位置（该方法按需使用） 如果要将地图显示在弹出框，而标注的地点不在弹出框中心，可以使用此方法设置弹出框标注地点位置，参数相对于父标签，这里是父级div宽高的一半

 

地图创建完成可能与预想的有偏差，会出现一些问题：

 

1.对地图进行放大缩小时，视图可能会偏移，用户体验极差。

参考了别人的博客得知这个问题产生的原因主要是因为百度地图加载的位置因为定位等原因，与整个html 页面产生了不同步滚动的问题。

 

解决：

当地图加载的时候执行

$(window).scrollTop(0);

也就是将父元素滚动到页面最顶端，因为产生问题都是因为position:fixed; 所以就算滚动到最顶端，地图也会加载在视图中，之后缩放就正常了。

 

同样的，在关闭地图的时候要将视图位置滚回之前所在的位置

$(window).scrollTop($(document).height());

这里根据自己需求确定滚回的距离，我的地图在页面底部，所以高度为  $(document).height()

 

2.地图放大缩小后中心点偏移

解决：

在设置中心点的图标对象时设置偏移位置

var myIcon = new BMap.Icon("../upload/images/2019/12/mapLocation.png", new BMap.Size(30, 42),{  //中心点图标
    anchor: new BMap.Size(15, 40),  //这里有两个数字15，40分别对应图标的一半宽度和高度。但是图片高度最好会故意设置高出2到3个像素
    infoWindowAnchor: new BMap.Size(15, 0)     //点击后的弹出信息距离图标位置
});

 

问题解决！

 

 

这里只是简单的地图，想用地图更多功能请参考