实现效果如下:
通过微软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>