就一段JS调用代码,在后台基本信息设置的其它选项里有调用示例,放到你的单页面模板里就可以实现
- <!--电子地图开始--->
- <script src="http://api.map.baidu.com/api?key={$MapKey}&v=1.0&services=true" type="text/javascript"></script>
- <div style="width:700px;height:340px;border:1px solid gray" id="container"></div>
<script type="text/javascript">
- var map = new BMap.Map("container"); // 创建Map实例
- var point = new BMap.Point({$MapCenterPoint}); // 创建点坐标
- map.centerAndZoom(point,16); // 初始化地图,设置中心点坐标和地图级别。
- map.addControl(new BMap.NavigationControl());
- map.addControl(new BMap.ScaleControl());
- map.addControl(new BMap.OverviewMapControl());
- var sContent ="<h4 style='margin:0 0 5px 0;padding:0.2em 0'>地址:{$FL_Title}</h4>" +"<p style='margin:0;line-height:1.5;font-size:13px;'>电话:{$KS_tel} </p>"
- {$ShowMarkerList}
- window.setTimeout(function(){map.panTo(new BMap.Point({$MapCenterPoint}));}, 2000);
-
- function addMarker(point, index){
- // 创建图标对象
- var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
- offset: new BMap.Size(10, 25), // 指定定位位置
- imageOffset: new BMap.Size(0, 0 - index * 25) // 设置图片偏移
- });
- var marker = new BMap.Marker(point, {icon: myIcon});
- map.addOverlay(marker);
-
- if (index==0){
- var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
- marker.addEventListener("click", function(){
- this.openInfoWindow(infoWindow); });
- map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
- }
- }
- </script>
- <!--电子地图结束--->
把上面{$开头的标签,改成你的实际地址,电话等即可