网站首页建站知识正文

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

2021-12-09 建站知识 516 ℃ 0 评论

很多人都想在页面调用百度地图，那么如何调用呢，看百度官方文档需要调用api接口，是不是太麻烦了，今天教你一个小白都会的方法，只需要会改路径就行。

在百度地图调用的地方写入ifrom框架，例如
<iframe frameborder="0" height="400" scrolling="no" src="/ditu/jiulishanditu.html" width="100%"></iframe>
在网站对应的/ditu/jiulishanditu.html地方新建一个html文档，文档里面直接放入地图的代码，图片的路径要对应好
地图代码参考下面代码

<!DOCTYPE html>

<head>

</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>

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

xxx

</p>

<p> <h3 style='margin:0 0 5px 0;'>电话：xxxxxxxxxxxx</h3> </p>

</div>

</body>

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>

红色地方填写坐标，展示的最终结果如下所示

标签：

上一篇：图片点击放大，可以翻页关闭怎么做。
下一篇：帝国cms如何根据自定义字段调用相同字段的文章

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

取消回复欢迎你发表评论:

搜索

网站分类

文章归档

网站首页 建站知识 正文

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

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

取消回复欢迎 你 发表评论:

请登录

网站首页建站知识正文

取消回复欢迎你发表评论: