廊坊SEO-解決各種網站問題↟◕,中小企業線上幫手
網站最佳化專家

網站首頁 建站知識 正文

如何在網站裡面呼叫百度地圖(無需申請API)

2021-12-09 建站知識 289 ℃ 0 評論

很多人都想在頁面呼叫百度地圖↟◕,那麼如何呼叫呢↟◕,看百度官方文件需要呼叫api介面↟◕,是不是太麻煩了↟◕,今天教你一個小白都會的方法↟◕,只需要會改路徑就行✘·。

  1. 在百度地圖呼叫的地方寫入ifrom框架↟◕,例如

    <iframe frameborder="0" height="400" scrolling="no" src="/ditu/jiulishanditu.html" width="100%"></iframe>

  2. 在網站對應的/ditu/jiulishanditu.html地方新建一個html文件↟◕,文件裡面直接放入地圖的程式碼↟◕,圖片的路徑要對應好

  3. 地圖程式碼參考下面程式碼


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">


<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="keywords" content="xxx" />

  <meta name="description" content="xxx" />

  <title>xxx</title>

  <!--引用百度地圖API-->


  <script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=uvN6vatvU44OQ0a9yuXdQZxTXODHGuLI"></script>

</head>


<style>

  body,

  html,

  #container {

    overflow: hidden;

    width: 100%;

    height: 400px;

    margin: 0;

    font-family: "微軟雅黑";

  }


  .info {

    z-index: 999;

    width: auto;

    min-width: 22rem;

    padding: .75rem 1.25rem;

    margin-left: 1.25rem;

    position: fixed;

    top: 1rem;

    background-color: #fff;

    border-radius: .25rem;

    font-size: 14px;

    color: #666;

    box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);

  }

</style>


<body>

  <!--百度地圖容器-->

  <div id="container"></div>

  <div class="" id="info" style="display: none;">

    <h4 style='margin:0 0 5px 0;'>昌平九里山公墓二區</h4>

    <img style='float:right;margin:0 4px 22px' id='imgDemo' src='/ditu/jiulishan.jpg' width='120' height='104' />

    <p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>

   xxx

    </p>

     <p> <h3 style='margin:0 0 5px 0;'>電話│◕:xxxxxxxxxxxx</h3>  </p>

  </div>

  </div>

  </div>


</body>

<script type="text/javascript">

  var map = new BMapGL.Map('container');

  var point = new BMapGL.Point(116.328692,40.21217);

  map.centerAndZoom(point, 12);


  map.enableScrollWheelZoom(true);

  // 建立新增點標記

  var marker = new BMapGL.Marker(point);

  map.addOverlay(marker);

  // 建立圖文資訊視窗


  var sContent = document.getElementById('info').innerHTML

  var infoWindow = new BMapGL.InfoWindow(sContent);


  map.openInfoWindow(infoWindow, point);




  // marker新增點選事件

  marker.addEventListener('click', function () {

    this.openInfoWindow(infoWindow);

    // 圖片載入完畢重繪infoWindow

    document.getElementById('imgDemo').onload = function () {

      infoWindow.redraw(); // 防止在網速較慢時生成的資訊框高度比圖片總高度小↟◕,導致圖片部分被隱藏

    };

  });

</script>


</html>


紅色地方填寫座標↟◕,展示的最終結果如下所示

image.png

標籤│◕:

本文暫時沒有評論↟◕,來新增一個吧(●'◡'●)

歡迎 發表評論:

搜尋
網站分類
文章歸檔
標籤列表
麻批好紧日起要舒服死了,精品免费一区二区三区在,国产精品无码一区二区三区不卡,久久久久亚洲av无码专区导航