我们可以在网站里添加可以扩大和缩小的动态地图,就像直接在使用地图app一样。动态地图的使用,可以使客户更直观的知道我们的位置,从而规划行程。网站添加动态地图,如果是在文章页添加的话,可以直接在网站后台编辑器里面添加动态地图。如果是其它页面添加的话,就需要手动添加代码。手动添加代码,要去对应的页面源码里面添加。
https的网站添加百度动态地图,有些小麻烦,可以使用下面的代码进行添加。
1、复制以下代码到你的页面:
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=73b9532bf882485372535b6b27e49dbc"></script><script type="text/javascript" src="https://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> <link rel="stylesheet" href="https://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css"/><style> #mapContainer td{padding:0;box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box; } #mapContainer{display:block;width:100%;height:400px}</style> <div id="mapContainer"></div><script type="text/javascript">var map; var poi = new BMap.Point(113.677274,34.876662); //创建和初始化地图函数: function initMap() { createMap();//创建地图 setMapEvent();//设置地图事件 addMapControl();//向地图添加控件 addMapOverlay();//向地图添加覆盖物 } function createMap() { map = new BMap.Map("mapContainer"); map.centerAndZoom(poi, 12); } function setMapEvent() { map.enableKeyboard(); map.enableDragging(); map.enableDoubleClickZoom(); map.disableScrollWheelZoom(); } function addClickHandler(target, window) { target.addEventListener("click", function () { target.openInfoWindow(window); }); } function addMapOverlay() { var content = '<div style="margin:0;line-height:20px;padding:2px;">' + '地址:某某市某某路<br>tel:13300001111' + '</div>'; //创建检索信息窗口对象 var searchInfoWindow = null; searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, { title: "大话运营", width: 380, height: 85, panel: "panel", enableAutoPan: true, searchTypes: [ BMAPLIB_TAB_SEARCH, //周边检索 BMAPLIB_TAB_TO_HERE, //到这里去 BMAPLIB_TAB_FROM_HERE //从这里出发 ] }); var marker = new BMap.Marker(poi); //创建marker对象 marker.addEventListener("click", function (e) { searchInfoWindow.open(marker); }) searchInfoWindow.open(marker); addClickHandler(marker, searchInfoWindow); map.addOverlay(marker); //在地图中添加marker } //向地图添加控件 function addMapControl() { var scaleControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); scaleControl.setUnit(BMAP_UNIT_IMPERIAL); map.addControl(scaleControl); var navControl = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(navControl); var overviewControl = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: false }); map.addControl(overviewControl); } initMap();</script> <div class="kzf-mod-link-container"></div>
2、注意:需要更换代码中的一些内容。
3、更换其中的titile,地址,电话,为你自己的东西。
4、更换代码BMap.Point(113.677274,34.876662)中的坐标为自己的坐标。
5、坐标获取网站:http://api.map.baidu.com/lbsapi/getpoint/index.html
文章来源:
大话运营教研室
版权声明:转载内容版权归作者及来源网站所有;本文仅代表作者观点,不代表本站立场;除非特别标注,否则均为本站原创文章,请勿转载。