Question

我在这里读了几篇关于同样事情的帖子。我有使用的代码，但我不确定我是否正确使用它。他们没有真正说过的一件事是，该代码将如何与其他用于控制参数，样式等的Google地图的javascript一起使用。

以下是其他thread的代码段：

<html>
<body>
    <table border="1" id="tableID" width="200">
        <tr>
            <td class="compulsory">5</td>
            <td class="compulsory">8</td>
            <td class="compulsory">8</td>
            <td class="one">8</td>
            <td class="one">7</td>
            <td class="one">6</td>
            <td class="two">9</td>
            <td class="two">4</td>
            <td class="total"></td>
        </tr>
    </table>
</body>
<script type="text/javascript">
var table = document.getElementById('tableID');
var tr = table.getElementsByTagName('tr')[0];
var tdsCompulsory = tr.getElementsByClassName('compulsory');
var tdsOne = document.getElementsByClassName('one');
var tdsTwo = document.getElementsByClassName('two');

var cData = [];
var oneData = [];
var twoData = [];
var sum = 0;

for(var i in tdsCompulsory){
    if(typeof tdsCompulsory[i].textContent != 'undefined')
    cData.push(tdsCompulsory[i].textContent);
}
for(var i in tdsOne){
    if(typeof tdsOne[i].textContent != 'undefined')
    oneData.push(tdsOne[i].textContent);
}
for(var i in tdsTwo){
    if(typeof tdsTwo[i].textContent != 'undefined')
    twoData.push(tdsTwo[i].textContent);
}
console.log(cData);
console.log(oneData);
console.log(twoData);

for(var i in cData){
    sum +=parseInt(cData[i]);
}

var maxOne=0, maxTwo=0;
for(var i in oneData){
        if(maxOne < parseInt(oneData[i])){
            maxTwo = maxOne;
            maxOne = parseInt(oneData[i]);
        } else if(maxTwo < parseInt(oneData[i])){
            maxTwo = parseInt(oneData[i]);
        }
}
sum += maxOne + maxTwo;

var max = 0;
for(var i in twoData){
    if(max < parseInt(twoData[i])){
        max = parseInt(twoData[i]);
    }
}
console.log(max);    
sum +=max;
console.log(sum);    
document.getElementsByClassName('total')[0].textContent = sum;
</script>
</html>

这是我目前用于我地图的Javascript：

function offsetCenter(latlng, offsetx, offsety) {

    // latlng is the apparent centre-point
    // offsetx is the distance you want that point to move to the right, in pixels
    // offsety is the distance you want that point to move upwards, in pixels
    // offset can be negative
    // offsetx and offsety are both optional

    var scale = Math.pow(2, map.getZoom());

    var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(latlng);
    var pixelOffset = new google.maps.Point((offsetx/scale) || 0,(offsety/scale) ||0)

    var worldCoordinateNewCenter = new google.maps.Point(
        worldCoordinateCenter.x - pixelOffset.x,
        worldCoordinateCenter.y + pixelOffset.y
    );

    var newCenter = map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);

    map.setCenter(newCenter);

}

如何合并其他文章中的代码段？现在，您可以看到here地图标记位于中心。我想要抵消它，所以它看起来更靠右边，所以它没有隐藏。

Answer 1

设置地图中心后调用offsetCenter功能（在地理编码器回调功能中）。

proof of concept fiddle

代码段

var map;

function initialize() {
  var latlng = new google.maps.LatLng(0, 0);
  var myOptions = {
    zoom: 16,
    center: latlng,
    scrollwheel: false,
    disableDefaultUI: true,
    draggable: false,
    keyboardShortcuts: false,
    disableDoubleClickZoom: false,
    noClear: true,
    scaleControl: false,
    panControl: false,
    streetViewControl: false,
    styles: [{
      "featureType": "landscape",
      "stylers": [{
        "hue": "#FFBB00"
      }, {
        "saturation": 43.400000000000006
      }, {
        "lightness": 37.599999999999994
      }, {
        "gamma": 1
      }]
    }, {
      "featureType": "road.highway",
      "stylers": [{
        "hue": "#FFC200"
      }, {
        "saturation": -61.8
      }, {
        "lightness": 45.599999999999994
      }, {
        "gamma": 1
      }]
    }, {
      "featureType": "road.arterial",
      "stylers": [{
        "hue": "#FF0300"
      }, {
        "saturation": -100
      }, {
        "lightness": 51.19999999999999
      }, {
        "gamma": 1
      }]
    }, {
      "featureType": "road.local",
      "stylers": [{
        "hue": "#FF0300"
      }, {
        "saturation": -100
      }, {
        "lightness": 52
      }, {
        "gamma": 1
      }]
    }, {
      "featureType": "water",
      "stylers": [{
        "hue": "#0078FF"
      }, {
        "saturation": -13.200000000000003
      }, {
        "lightness": 2.4000000000000057
      }, {
        "gamma": 1
      }]
    }, {
      "featureType": "poi",
      "stylers": [{
        "hue": "#00FF6A"
      }, {
        "saturation": -1.0989010989011234
      }, {
        "lightness": 11.200000000000017
      }, {
        "gamma": 1
      }]
    }],
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map"), myOptions);
  var geocoder_map = new google.maps.Geocoder();
  var address = '11681 King Fahd Road, Al Mohammadiyah, 4047, Riyadh, Riyadh Province Saudi Arabia';
  geocoder_map.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var image = "http://maps.google.com/mapfiles/ms/micons/blue.png";
      var marker = new google.maps.Marker({
        map: map,
        icon: image,
        position: map.getCenter()
      });
      var contentString = 'Tagline';
      var infowindow = new google.maps.InfoWindow({
        content: contentString
      });

      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
      });
      // move center 200 pixels to the right.
      offsetCenter(map.getCenter(), 200, 0)
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.LEFT_CENTER].push(centerControlDiv);
}
google.maps.event.addDomListener(window, "load", initialize);

function offsetCenter(latlng, offsetx, offsety) {

    // latlng is the apparent centre-point
    // offsetx is the distance you want that point to move to the right, in pixels
    // offsety is the distance you want that point to move upwards, in pixels
    // offset can be negative
    // offsetx and offsety are both optional

    var scale = Math.pow(2, map.getZoom());

    var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(latlng);
    var pixelOffset = new google.maps.Point((offsetx / scale) || 0, (offsety / scale) || 0)

    var worldCoordinateNewCenter = new google.maps.Point(
      worldCoordinateCenter.x - pixelOffset.x,
      worldCoordinateCenter.y + pixelOffset.y
    );

    var newCenter = map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);

    map.setCenter(newCenter);

  }
  /**
   * The CenterControl adds a control to the map that recenters the map on
   * Chicago.
   * This constructor takes the control DIV as an argument.
   * @constructor
   */

function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.setAttribute("style", "display:block;width:400px;background-color:white;height:100px; border: 1px black solid;");
  controlUI.style.width = '400px';

  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Test Text';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to Chicago.
  controlUI.addEventListener('click', function() {
    map.setCenter(chicago);
  });

}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

如何抵消谷歌地图标记？

1 个答案: