微软bing英文地图公司地址标注

news2025/6/27 22:13:05

实现效果如下：
bing地图嵌入网站
通过微软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>