人人站如何插入地图坐标
2022-05-11
3228
第一步先获取到坐标
打开百度坐标获取 https://api.map.baidu.com/lbsapi/getpoint/index.html
在地图上找到想要的位置点击生成坐标
第二步:复制下面代码插入到文章中或插入到模板文件中都可以。插入后如下图修改为自己的坐标和名称。
<div style="width:100%;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div> <script type="text/javascript" src="//api.map.baidu.com/getscript?v=2.0&ak=OfldXkI591GW281wpaUBSHES&services=&t=20200103103842"></script> <script> (function () { var coord = "116.403694,39.914935";//使用第一步获取的坐标替换 coord = coord.split(","); if (coord.length != 2) { coord[0] = 116.403694; coord[1] = 39.914935; } var map = new BMap.Map("map"); map.centerAndZoom(new BMap.Point(coord[0],coord[1]), 14); var marker1 = new BMap.Marker(new BMap.Point(coord[0],coord[1])); // 创建标注 map.addOverlay(marker1); // 将标注添加到地图中 //marker1.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 //创建信息窗口 var infoWindow1 = new BMap.InfoWindow("<b>公司名称</b><br>地址:公司地址<br>电话:公司电话"); marker1.openInfoWindow(infoWindow1); marker1.addEventListener("click", function () { this.openInfoWindow(infoWindow1); }); //向地图中添加缩放控件 var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrl_nav); //向地图中添加缩略图控件 var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }); map.addControl(ctrl_ove); //向地图中添加比例尺控件 var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrl_sca); map.enableDragging();//启用地图拖拽事件,默认启用(可不写) map.enableScrollWheelZoom();//启用地图滚轮放大缩小 map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写) map.enableKeyboard();//启用键盘上下左右键移动地 })(); </script>
将地图插入到文章中如下:
将地图插入模板源码中: