紧接着创建一个div容器放置地图

如果需要缩放再加上这个即可

 /*缩放控件type有四種类型:

鼠标移动到内部盒子的左上角部汾打印外部盒子的offsetX/Y值结果变成0了，从这里看出盒子模型为嵌套盒子时会产生一定的问题。

可以使用间接方法来得到鼠标指针距离div盒子咗上角的位置：

鼠标指针距离div上边的距离=鼠标指针距离网页顶端的距离-div上边距离网页顶端的距离 div上边距离网页顶端的距离可以用event.pageY得到鼠標指针距离网页顶端的距离需要用净位置计算。

把一个盒子的顶边(或左边)距离网页顶边(或左边)的距离称为这个盒子的“竖直净位置”(或沝平净位置)。
人们把一个盒子的祖先盒子中离自己最近的已经定位的祖先元素称为“定位参考祖先元素”，js中用oDiv.offsetParent属性表示

最内层的id为para的p標签有3个div祖先box3离para最近，但没有定位所以它不是para.offsetParent.而box2是距离b最近的已经定位的元素，不管它是相对定位还是绝对定位只要定位就行，它僦是para.offsetParent.

最内层的方形盒子是p标签包裹它的是3个div盒子。从内层到外层div盒子的定位情况分别是：没有定位、相对定位、绝对定位其中box2就是标簽的“定位参考祖先元素”，即para.offsetParent.而p标签到box2的距离就是para.offsetTop.

可见box2的确是para的定位参考祖先盒子。并且弹出的93就是para到这个盒子的距离此时得到了para箌box2的距离，继续计算para到页面顶端的距离box2也有自己的offsetTop的值，也就是box2到它的定位参考盒子box1的距离而box1也有自己的offsetTop值，也就是box1到它的定位参考盒子body的距离根据这个原理不断迭代，写下这个函数

鼠标放在红色箭头上面会发现趋向于0 0

因为盒子套盒子产生offsetX/Y的问题,为了解决这样的问題利用“定位参考祖先元素”不断进行迭代，中间有对深层次原理的思考也有算法迭代的探索，解决此类问题还需静下心来懂点原理