廊坊SEO-解决各种网站问题,中小企业线上帮手
网站优化专家

网站首页 建站知识 正文

如何在网站里面调用百度地图(无需申请API)

2021-12-09 建站知识 433 ℃ 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

标签:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

搜索
网站分类
文章归档
标签列表