网站添加百度动态地图方法,https网站怎么添加百度动态地图

大话运营教研室 714 0

我们可以在网站里添加可以扩大和缩小的动态地图,就像直接在使用地图app一样。动态地图的使用,可以使客户更直观的知道我们的位置,从而规划行程。网站添加动态地图,如果是在文章页添加的话,可以直接在网站后台编辑器里面添加动态地图。如果是其它页面添加的话,就需要手动添加代码。手动添加代码,要去对应的页面源码里面添加。

网站添加百度动态地图方法,https网站怎么添加百度动态地图-第1张图片

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、注意:需要更换代码中的一些内容。

网站添加百度动态地图方法,https网站怎么添加百度动态地图-第2张图片

3、更换其中的titile,地址,电话,为你自己的东西。
4、更换代码BMap.Point(113.677274,34.876662)中的坐标为自己的坐标。
5、坐标获取网站:http://api.map.baidu.com/lbsapi/getpoint/index.html

抱歉,评论功能暂时关闭!