Question

在我正在制作的个人博客网站上，我将背景设置为谷歌地图，并在顶部有一个较小的div，谈论我去过的地方等等。我想做的是有类似的链接＆＃34;在谷歌地图中显示位置＆＃34;单击时，背景地图将更新到相应的位置。

我尝试制作javascript代码

<script> function initialize() {
    var mapCanvas = document.getElementById('map-canvas');
    var mapOptions = {
        scrollwheel: false,
        center: new google.maps.LatLng(34.0722, -118.4441),
        zoom: 14,
        zoomControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
        streetViewControl: false,
        panControl: false,
        mapTypeControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);

    var marker = new google.maps.Marker();
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

<script type="text/javascript">
    window.onload = function() {
        var a = document.getElementsByClassName("map-link");
        a.onclick = function() {
            marker.setMap(map);
        }
    }
</script>

<a class="map-link" href="javascript:void(0)"> Show in Google Maps </a>

这样的事情，但我没有看到任何结果。有人知道怎么做吗？

Answer 1

使用map.setCenter更改地图的中心。
getElementsByClassName返回一个DOM元素数组。

google.maps.event.addDomListener（document.getElementsByClassName（＆＃34; map-link＆＃34;）[0]，＆＃39; click＆＃39;，function（e）{ map.setCenter（new google.maps.LatLng（42，-72））; }）;

proof of concept fiddle

代码段

＆＃13;

function initialize() {
  var mapCanvas = document.getElementById('map-canvas');
  var mapOptions = {
    scrollwheel: false,
    center: new google.maps.LatLng(34.0722, -118.4441),
    zoom: 14,
    zoomControlOptions: {
      position: google.maps.ControlPosition.RIGHT_CENTER
    },
    streetViewControl: false,
    panControl: false,
    mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(mapCanvas, mapOptions);
  google.maps.event.addDomListener(document.getElementsByClassName("map-link")[0], 'click', function(e) {
    map.setCenter(new google.maps.LatLng(42, -72));
  });
  google.maps.event.addDomListener(document.getElementsByClassName("map-link")[1], 'click', function(e) {
    map.setCenter(new google.maps.LatLng(41, -72.1));
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

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

＆＃13;

<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"></script>
<ul>
  <li><a class="map-link" href="javascript:void(0)"> Show in Google Maps </a>
  </li>
  <li><a class="map-link" href="javascript:void(0)"> Show another place in Google Maps </a>
  </li>
</ul>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

＆＃13;

用于重新定位谷歌地图的{html链接

1 个答案: