Google Maps地图图钉中的动态文本

时间:2018-12-04 14:21:04

标签: javascript google-maps-markers

我需要在Google地图图钉上添加动态文本,但是我遇到了使用JavaScript抓取文本的问题。这是我的代码:

<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3&libraries=geometry,places&key="></script>

<script type="text/javascript">

var map;
var CENTER_LAT = 36.1147;
var CENTER_LON = -115.173;
var ZOOM = 7;

//Start Get data points for SCHEDULEDORDERS
function getPointsScheduled(){

var tbl = $('table.Table208004 tr').get().map(function(row) {
  return $(row).find('td').get().map(function(cell) {
    return $(cell).html();
  });
});

addPointsToMapScheduled(tbl);

}

function addPointsToMapScheduled(points){
for(x=0;x<points.length;x++){
   latlng = new google.maps.LatLng(points[x][2], points[x][3]);
   addMarkerScheduled(latlng,points[x][4]);     //  <-- Want the dynamic text to be the value from column 4 of the referenced data table
}
}
//End Get data points for SCHEDULEDORDERS 


function initialize() {

  var mapOptions = {
    zoom: ZOOM,
    center: new google.maps.LatLng(CENTER_LAT, CENTER_LON),
    mapTypeControl: true,
    mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            position: google.maps.ControlPosition.TOP_RIGHT
       }
  }
  map = new google.maps.Map(document.getElementById('208008'), mapOptions);

  //Get Map Points for SCHEDULEDORDERS          
  getPointsScheduled();


// Adds a marker to the map and push to the array.
// Gets map pins for SCHEDULEDORDERS
function addMarkerScheduled(location, device) {
  var pinColor = "00F900";
  var letterColor = "000000";
  var fontSize = "11";
  var fontStyle = "b";
  var textString = "D01";   //  <-- Need this to be dynamic
  var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_spin&chld=0.75|0" + "|" + pinColor + "|" + fontSize + "|" + fontStyle + "|" + textString,
            new google.maps.Size(50, 60),
            new google.maps.Point(0,0),
            new google.maps.Point(10, 34));

  var marker = new google.maps.Marker({
    position: location,
    map: map,
    title: device,
    draggable: false,
    icon: pinImage
  });

}


</script>

在底部附近,这是我需要动态文本的地方:

var textString = "D01";   //  <-- Need this to be dynamic

在顶部附近,这是我想在地图图钉中显示的内容:

   addMarkerScheduled(latlng,points[x][4]);     //  <-- Want the dynamic text to be the value from column 4 of the referenced data table

任何建议将不胜感激!

0 个答案:

没有答案