Fatal编程技术网
  • javascript/
  • Javascript 在圆圈内放置字母标记

Javascript 在圆圈内放置字母标记

javascript html google-maps

Javascript 在圆圈内放置字母标记,javascript,html,google-maps,Javascript,Html,Google Maps,我正试图让右侧边栏中的字母出现在 圆圈像这样的 有人知道怎么做吗？谢谢 信件编码： for (var i = 0; ((i < numberOfResults) && (i < closest.length)); i++) { pins[i].setMap(map); var letterMarkers = String.fromCharCode(65 + i); pins[i].set('labe

我正试图让右侧边栏中的字母出现在 圆圈像这样的

有人知道怎么做吗？谢谢

信件编码：

for (var i = 0;
        ((i < numberOfResults) && (i < closest.length)); i++) {
        pins[i].setMap(map); 
        var letterMarkers = String.fromCharCode(65 + i);
        pins[i].set('label', letterMarkers);
        sidebarHtml +=  "<tr><td><a href='javascript:google.maps.event.trigger(closest[" + results[i].idx_closestMark + "],\"click\");'>" + letterMarkers + '</a><br>' + results[i].title + '</a><br>' + results[i].address + "<br>" + results[i].distance.text + ' approximately ' + results[i].duration.text + "<br><a href='javascript:getDirections(customerMarker.getPosition(),&quot;" + results[i].address + "&quot;);'>Get Directions</a></tr></td>"

      }
      sidebarHtml += '</table>';
      outputDiv.innerHTML = sidebarHtml;
    }
  });
}

for（var i=0；
（（i”+结果[i]。标题+”
“+结果[i]。地址+“
”+结果[i]。距离。文本+”大约“+结果[i]。持续时间。文本+”
“
}
sidebarHtml+=''；
outputDiv.innerHTML=sidebarHtml；
}
});
}
完整代码：

<!DOCTYPE html>
<html>
<head>
    <style>
         html,
 body,
 #map {
   margin: 0;
   padding: 0;
   height: 600px;
   width: 1050px;
 }
 .text {
   width: 300px;
   height: 600px;
   background-color: white;
   overflow: scroll;
   overflow-y: auto;
   overflow-x: hidden;
 }
 #side_bar {
   z-index: 100;
   position: absolute;
   top: 135px;
   left: 1080px;
 }
 #panel {
   z-index: -100;
   display: block;
   position: absolute;
   top: 135px;
   left: 1080px;
 }
 #mdiv {
   z-index: 500;
   width: 25px;
   height: 25px;
   display: none;
   background-color: red;
   border: 1px solid black;
   position: absolute;
   left: 1330px;
   top: 112px;
 }
 .mdiv {
   height: 25px;
   width: 2px;
   margin-left: 12px;
   background-color: black;
   transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   /* IE 9 */
   -webkit-transform: rotate(45deg);
   /* Safari and Chrome */
   z-index: 1;
 }
 .md {
   height: 25px;
   width: 2px;
   background-color: black;
   transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   /* IE 9 */
   -webkit-transform: rotate(90deg);
   /* Safari and Chrome */
   z-index: 2;
 }
 tr:nth-child(even) {
   background: #E5E4E2
 }
 tr:nth-child(odd) {
   background: #FFF
 }


    </style>
</head>
<link rel="stylesheet" type="text/css" href="assets/css/storelocator.css" />
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div class="bh-sl-container">
    <div id="page-header">
        <h1 class="bh-sl-title">The Auditor Locator</h1>
        </div>

    <div class="bh-sl-form-container">
<form onsubmit="codeAddress(); return false;" action="...">
<div class="form-input">
                <label for="bh-sl-address">Enter Address or Zip Code:</label>
  <input id="address" type="text" value="Paramus, NJ">
  <input type="submit" value="Submit"
style="border:1px solid #666666;
height:34px; width:50pt; font-size:10pt; BACKGROUND-COLOR: #4CAF50;
color:#FFFFFF">
</form>

      <table border="0" style="height:100%">
    <tr style="height:100%">
      <td style="height:100%">
        <div id="map"></div>
      </td>
      <td>
        <div id="side_bar" class='text'></div>
        <div id="panel" class='text'></div>
      </td>
    </tr>
  </table>

<SCRIPT>
function passWord() {
var testV = 1;
var pass1 = prompt('Please Enter Your Password',' ');
while (testV < 3) {
if (!pass1) 
history.go(-1);
if (pass1.toLowerCase() == "letmein") {

window.open('http://vince.netau.net/employee.php');
break;
} 
testV+=1;
var pass1 = 
prompt('Access Denied - Password Incorrect, Please Try Again.','Password');
}
if (pass1.toLowerCase()!="password" & testV ==3) 
history.go(-1);
return " ";
} 
</SCRIPT>

<FORM>
<input type="button" value="Database" onClick="passWord()" style="border:1px solid #666666;
height:34px; width:60pt; font-size:10pt; BACKGROUND-COLOR: #4CAF50;
color:#FFFFFF">
</FORM>



  <div id="info"></div>
  <div id="mdiv">
    <div class="mdiv">
      <div class="md">
      </div>
    </div>
  </div>
    <script type="text/javascript">
        var geocoder = null;
var map = null;
var customerMarker = null;
var gmarkers = [];
var closest = [];
var directionsDisplay = new google.maps.DirectionsRenderer();;
var directionsService = new google.maps.DirectionsService();
var map;

function hideMarkers() {
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setMap(null);
  }
  customerMarker.setMap(null);
}

function showMarkers() {
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setMap(map);
  }
  customerMarker.setMap(map);
  directionsDisplay.setMap(null);
}


function initialize() {
  // alert("init");
  geocoder = new google.maps.Geocoder();
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 9,
    center: new google.maps.LatLng(52.6699927, -0.7274620),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var infowindow = new google.maps.InfoWindow();
  var marker, i;
  var bounds = new google.maps.LatLngBounds();
  document.getElementById('info').innerHTML = "found " + locations.length + " locations<br>";
  for (i = 0; i < locations.length; i++) {
    var coordStr = locations[i][3];
    var coords = coordStr.split(",");
    var pt = new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1]));
    bounds.extend(pt);
    marker = new google.maps.Marker({
      position: pt,
      map: map,
      icon: locations[i][4],
      address: locations[i][2],
      title: locations[i][1],
      html: locations[i][1] + "<br>" + locations[i][2] + "<br><br><a href='javascript:getDirections(customerMarker.getPosition(),&quot;" + locations[i][2] + "&quot;);'>Get Directions</a>"
    });
    gmarkers.push(marker);
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(marker.html);
          infowindow.open(map, marker);
        }
      })
      (marker, i));
  }
  map.fitBounds(bounds);

  $("#mdiv").click(function() {
    $("#side_bar").css({
      "z-index": 100,
      "top": "135px"
    });
    $("#panel").css("z-index", -100);
    $("#mdiv").css("display", "none");
    showMarkers();
  });
}

function codeAddress() {
  var address = document.getElementById('address').value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      if (customerMarker) customerMarker.setMap(null);
      customerMarker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
      closest = findClosestN(results[0].geometry.location, 12);
      // get driving distance
      closest = closest.splice(0, 12);
      calculateDistances(results[0].geometry.location, closest, 12);
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

function findClosestN(pt, numberOfResults) {
  var closest = [];
  document.getElementById('info').innerHTML += "processing " + gmarkers.length + "<br>";
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].distance = google.maps.geometry.spherical.computeDistanceBetween(pt, gmarkers[i].getPosition());
    document.getElementById('info').innerHTML += "process " + i + ":" + gmarkers[i].getPosition().toUrlValue(6) + ":" + gmarkers[i].distance.toFixed(2) + "<br>";
    gmarkers[i].setMap(null);
    closest.push(gmarkers[i]);
    closest.sort(sortByDist);
  }

  return closest;
}

function sortByDist(a, b) {
  return (a.distance - b.distance)

}

function calculateDistances(pt, closest, numberOfResults) {
  var service = new google.maps.DistanceMatrixService();
  var request = {
    origins: [pt],
    destinations: [],
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.IMPERIAL,
    avoidHighways: false,
    avoidTolls: false
  };
  for (var i = 0; i < closest.length; i++) {
    request.destinations.push(closest[i].getPosition());
  }
  service.getDistanceMatrix(request, function(response, status) {
    if (status != google.maps.DistanceMatrixStatus.OK) {
      alert('Error was: ' + status);
    } else {
      var origins = response.originAddresses;
      var destinations = response.destinationAddresses;
      var outputDiv = document.getElementById('side_bar');
      var sidebarHtml = '<table>';

      var results = response.rows[0].elements;
      // save title and address in record for sorting
      for (var i = 0; i < closest.length; i++) {
        results[i].title = closest[i].title;
        results[i].address = closest[i].address;
        results[i].idx_closestMark = i;
      }
      results.sort(sortByDistDM);

      var pins = [];     

     results.forEach(function(result){
        closest.forEach(function (addr){    
            if(result.address === addr.address){         
            pins.push(addr);
          }
        });
     });     

      for (var i = 0;
        ((i < numberOfResults) && (i < closest.length)); i++) {
        pins[i].setMap(map); 
        var letterMarkers = String.fromCharCode(65 + i);
        pins[i].set('label', letterMarkers);
        sidebarHtml +=  "<tr><td><a href='javascript:google.maps.event.trigger(closest[" + results[i].idx_closestMark + "],\"click\");'>" + letterMarkers + '</a><br>' + results[i].title + '</a><br>' + results[i].address + "<br>" + results[i].distance.text + ' approximately ' + results[i].duration.text + "<br><a href='javascript:getDirections(customerMarker.getPosition(),&quot;" + results[i].address + "&quot;);'>Get Directions</a></tr></td>"

      }
      sidebarHtml += '</table>';
      outputDiv.innerHTML = sidebarHtml;
    }
  });
}




function getDirections(origin, destination) {
  var request = {
    origin: origin,
    destination: destination,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setMap(map);
      directionsDisplay.setDirections(response);
      $("#side_bar").css({
        "z-index": -100,
        "top": "135px"
      });
      $("#panel").css("z-index", 100);
     $("#mdiv").css("display", "block");
      hideMarkers();
      directionsDisplay.setPanel(document.getElementById('panel'));
    }
  });
}

function sortByDistDM(a, b) {
  return (a.distance.value - b.distance.value)
}

google.maps.event.addDomListener(window, 'load', initialize);
 var locations = [
  ["1", "John Doe", "145 Rock Ridge Road, Chester, NY ", "41.314926,-74.270134", "http://maps.google.com/mapfiles/ms/icons/blue.png"],
  ["2", "Jim Smith", "12 Williams Rd, Montvale, NJ ", "41.041599,-74.019554", "http://maps.google.com/mapfiles/ms/icons/green.png"],
  ["3", "John Jones", "689 Fern St Township of Washington, NJ ", "40.997704,-74.050598", "http://maps.google.com/mapfiles/ms/icons/yellow.png"]];
    </script>

</body>
</html>


html，
身体，
#地图{
保证金：0；
填充：0；
高度：600px；
宽度：1050px；
}
.文本{
宽度：300px；
高度：600px；
背景色：白色；
溢出：滚动；
溢出y：自动；
溢出x：隐藏；
}
#侧板{
z指数：100；
位置：绝对位置；
顶部：135px；
左：1080px；
}
#面板{
z指数：-100；
显示：块；
位置：绝对位置；
顶部：135px；
左：1080px；
}
#mdiv{
z指数：500；
宽度：25px；
高度：25px；
显示：无；
背景色：红色；
边框：1px纯黑；
位置：绝对位置；
左：1330px；
顶部：112px；
}
.mdiv{
高度：25px；
宽度：2倍；
左边距：12px；
背景色：黑色；
变换：旋转（45度）；
-ms变换：旋转（45度）；
/*IE 9*/
-webkit变换：旋转（45度）；
/*狩猎与铬*/
z指数：1；
}
医学博士{
高度：25px；
宽度：2倍；
背景色：黑色；
变换：旋转（90度）；
-ms变换：旋转（90度）；
/*IE 9*/
-webkit变换：旋转（90度）；
/*狩猎与铬*/
z指数：2；
}
tr:n个孩子（偶数）{
背景：#E5E4E2
}
tr:n个孩子（奇数）{
背景：#FFF
}
审计员定位器
输入地址或邮政编码：
函数密码（）{
var-testV=1；
var pass1=prompt（'请输入您的密码'，''）；
而（testV<3）{
如果（！pass1）
历史。go（-1）；
if（pass1.toLowerCase（）=“letmein”）{
打开窗户http://vince.netau.net/employee.php');
打破
} 
testV+=1；
var pass1=
提示（“访问被拒绝-密码不正确，请重试。”，“密码”）；
}
if（pass1.toLowerCase（）！=“password”&testV==3）
历史。go（-1）；
返回“”；
} 
var-geocoder=null；
var-map=null；
var customerMarker=null；
var gmarkers=[]；
var最近值=[]；
var directionsDisplay=new google.maps.DirectionsRenderer（）；；
var directionsService=new google.maps.directionsService（）；
var映射；
函数hideMarkers（）{
对于（变量i=0；i”；
对于（i=0；i”+locations[i][2]+“

”
});
G标记器。推（标记器）；
google.maps.event.addListener（标记，'click'，（函数（标记，i）{
返回函数（）{
setContent（marker.html）；
信息窗口。打开（地图、标记）；
}
})
（marker，i））；
}
映射边界（bounds）；
$（“#mdiv”）。单击（函数（）{
$（“#侧栏”）.css({
“z指数”：100，
“顶部”：“135px”
});
$（“#面板”）.css（“z指数”，-100）；
$（“#mdiv”）.css（“显示”、“无”）；
showmarks（）；
});
}
函数代码地址（）{
var address=document.getElementById（'address'）。值；
地理编码({
“地址”：地址
}，功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location）；
if（customerMarker）customerMarker.setMap（null）；
customerMarker=new google.maps.Marker({
地图：地图，
位置：结果[0]。几何体。位置
});
最近的=findClosestN（结果[0]。geometry.location，12）；
//获得驾驶距离
最近的=最近的拼接（0,12）；
计算实例（结果[0]。geometry.location，最近，12）；
}否则{
警报（'地理编码因以下原因未成功：'+状态）；
}
});
}
函数findClosestN（pt，numberOfResults）{
var最近值=[]；
document.getElementById（'info'）.innerHTML+=“正在处理”+gmarkers.length+“
”；
对于（变量i=0；i”；
gmarkers[i].setMap（空）；
最近的推送（gmarkers[i]）；
最近的。排序（排序列表）；
}
返回最近的位置；
}
功能排序列表（a、b）{
返回（a.距离-b.距离）
}
函数计算状态（pt，关闭

.numberCircle {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */

    width: 36px;
    height: 36px;
    padding: 8px;

    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;

    font: 32px Arial, sans-serif;
}



outputDiv.innerHTML += "<div class='numberCircle'>"+letterMarkers +
  "</div><a href='javascript:google.maps.event.trigger(closest[" + 
  results[i].idx_closestMark + "],\"click\");'>" + results[i].title + 
  '</a><br>' + results[i].address + "<br>" + results[i].distance.text + 
  ' approximately ' + results[i].duration.text + 
  "<br><a href='javascript:getDirections(customerMarker.getPosition(),&quot;" + 
  results[i].address + "&quot;);'>Get Directions</a><br><hr>";