实现效果如下:
通过微软Bing地图嵌入代码,以在网站中展示公司地址,使用鼠标滚动可缩放或点击拖动地图。
直接上代码,根据自己的需求修改相关信息即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bing map</title>
<style type="text/css">
html,body{margin:0;padding:0;}
.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
.dituContent{height: 550px;width: 100%;}
@media screen and (max-width:991px){
.dituContent{height: 290px;}
}
</style>
</head>
<body>
<div id="dituContent"></div>
</body>
<script type='text/javascript'>
function loadMapScenario() {
var map = new Microsoft.Maps.Map(document.getElementById('dituContent'), {
/* No need to set credentials if already passed in URL */
center: new Microsoft.Maps.Location(22.553400, 113.884003),
zoom: 16,
});
var center = map.getCenter();
var infobox = new Microsoft.Maps.Infobox(center, {
title: 'Address',
description: 'Room 201, Building e, Liyukeng Industrial Zone, Shangwu, Shiyan, Baoan,Shenzhen,Guangdong Province,China',
maxWidth: 300
});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
map.entities.push(pushpin);
infobox.setMap(map);
draggable: false;
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=AlGZhwr7PjEk4TzlR3jKdBL1i7U5gkEZ0mOv4gs_r4x-sq72-wn_qsJiLzo5Wn66&callback=loadMapScenario&mkt=en-US&setlang=en' async defer>
</script>
</html>