BingMap的使用_new microsoft.maps.infobox 怎么加样式-CSDN博客

本文链接：https://blog.csdn.net/dou_ge_ge/article/details/85211620
<!DOCTYPE html>
<html>
<head>
<title>loadmapasyncHTML</title>
<style type='text/css'>
body {
 margin: 0;
 padding: 0;
 overflow: hidden;
 font-family: 'Segoe UI', Helvetica, Arial, Sans-Serif
}

.infobox-title {
 padding-bottom: 2px;
}

#myMap {
 width: 100%;
 height: 600px;
 float: left;
}

.box {
 position: relative;
 padding-top: 8px;
}

.con {
 width: 200px;
 height: 100px;
 border: 1px LightBlue solid;
 border-radius: 3px;
 background-color: LightBlue;
 margin-top: 0px;
}

.con-ret {
 border: 9px solid transparent;
 border-top-color: LightBlue;
 position: absolute;
 left: 1px;
 bottom: -13px;
 border-width: 7px 7px 7px 7px;
}

.close {
 position: absolute;
 display: inline-block;
 margin: 0px 0px 0px 190px;
 line-height: 0;
 text-decoration: none
}
</style>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<script src="../js/jquery-2.1.4.min.js"></script>
<script type='text/javascript'
 src='https://www.bing.com/api/maps/mapcontrol?key=AvfgntqoiU4NADAHQajrTZODiPAhoh5KCtFmdgX4y8npxuqZ0ssxwp76mhjYx1Dg&mkt=zh-cn&setlang=zh-cn'></script>
<script type='text/javascript'>
 $(function() {

 });
 var map, infobox;
 //现在的经度
 var nowlatitude;
 //现在的纬度
 var nowlongitude;
 //目的地的经度
 var endlatitude;
 //目的地的纬度
 var endlongitude;
 //导航服务
 var directionsManager;
 //现在地
 var currpio;

 function loadMapScenario() {
  //地图的初始化
  map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
  map.setView({
   zoom : 13
  });
  //导航服务的取得

  Microsoft.Maps.loadModule('Microsoft.Maps.Directions',function() {
   directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
   });

  currpio = map.getCenter();
  // 现在的经度
  nowlatitude = currpio.latitude;
  // 现在的纬度
  nowlongitude = currpio.longitude;

  //当前的位置标志
  var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
   color : "red",
   icon : "../image/poi_custom.png",
   title : "当前位置",
  });
  map.entities.push(pin);

  for (var i = 0; i < 55; i++) {
  //************START***************
  //用户1
  //var temp = "1";
  //var ranlatitude = nowlatitude + 0.024;
  //var ranlongitude = nowlongitude + 0.035;
 
  var temp=i+1;
  //返回大于0小于1的小数
  var randFlg = Math.random();
  var randFlg2 = Math.random();
  
  if (randFlg2 > 0.5) {
   ranlatitude = (nowlatitude * 1) + (randFlg * 0.06);
  } else {
   ranlatitude = (nowlatitude * 1) - (randFlg * 0.06);
  }
  
  randFlg = Math.random();
  randFlg2 = Math.random();
  if (randFlg2 > 0.5) {
   ranlongitude = (nowlongitude * 1) - (randFlg * 0.055);
  } else {
   ranlongitude = (nowlongitude * 1) + (randFlg * 0.055);
  }
  
  //用户的位置
  var loc = new Microsoft.Maps.Location(ranlatitude, ranlongitude);
  //定义一个文本框不显示
  infobox = new Microsoft.Maps.Infobox(loc, {
   visible : false
  });
  infobox.setMap(map);
  //文本框要显示的内容
  var html ="<div style='margin-top:-5px' class='user'><table style='color:black'><tr><td style='text-align:center;'>氏名:</td><td>氏名-テスト"
    + temp
    + "</td></tr><tr><td style='text-align:center;'>電話番号:</td><td>080-123456</td></tr><tr><td style='text-align:center;'><a  href='karute.html'target='black'>お客様カルテ</a></td><td style='text-align:center;'>"
    + "<a  href='javascript:void(0);' onclick='myroat("
    + loc.latitude
    + ","
    + loc.longitude
    + ")'>ルート室内</a></td></tr></table></div>";
  //位置标记的定义
  pin = new Microsoft.Maps.Pushpin(loc,{title:'顧客'+temp,color:'red'});
        pin.metadata = {
                description: html,
           color : "red",
           title : "氏名-テスト"+temp
            };
        //添加点击事件
  Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);
  map.entities.push(pin);
  //将该位置的用户信息输入到对应的文本框中，并且让对应的文本框显示出来
  function pushpinClicked(e) {
   if (e.target.metadata) {
    infobox.setOptions({
     location : e.target.getLocation(),
     title : e.target.metadata.title,
     description : e.target.metadata.description,
     visible : true
    });
   }
  }
  //************END***************
  }

 }

 //路线的导航
 function myroat(lat, lon) {
  Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function() {
   //清空上次的路线
   directionsManager.clearAll();
   directionsManager.clearDisplay();
   //出发地的实例化
   var waypoint1 = new Microsoft.Maps.Directions.Waypoint({
    address : '出发地',
    location : new Microsoft.Maps.Location(nowlatitude, nowlongitude)
   });
   //目的地的实例化
   var waypoint2 = new Microsoft.Maps.Directions.Waypoint({
    address : '目的地',
    location : new Microsoft.Maps.Location(lat, lon)
   });



   //出发地和目的地的设置
   directionsManager.addWaypoint(waypoint1);
   directionsManager.addWaypoint(waypoint2);
   directionsManager.setRenderOptions({
    itineraryContainer : document.getElementById('printoutPanel')
   });
   directionsManager.showInputPanel('directionsInputContainer');
   directionsManager.calculateDirections();
  });
 }
 
 //位置变化时的函数
 function UsersLocationUpdated(position) {
    //用户的当前位置
 var userPin;
    //当前的地点
     currpio = new Microsoft.Maps.Location(
                position.coords.latitude,
                position.coords.longitude);
 //现在的经度
 nowlatitude=position.coords.latitude;
 //现在的纬度
 nowlongitude=position.coords.longitude;
   
    //Update the user pushpin.
    userPin.setLocation(currpio);
    userPin.setOptions({ visible: true });
   
    //Center the map on the user's location.
    map.setView({ center: currpio });
}
</script>
</head>

<body onload="loadMapScenario()">
 <div id='myMap'></div>
  <div class="print-container" style="display:none">
  <div id='directionsInputContainer'></div>
  <div id='printoutPanel'></div>
 </div>
</body>

</html>