Question

我正在创建一个小地图，下面是以下代码，但我希望能够在同一页面上使用外部链接使地图中心位于特定标记上，但我不知道或搜索什么因为，我猜我需要创建一个监听器，但我需要一些指导：

修改我设法弄清楚如何使用以下方法添加外部链接：

//Button Controls
      google.maps.event.addDomListener(document.getElementById("Map_GeoLocation"),"click", function() { map.setCenter(GeoMarker.getPosition() ); return false; } );

但我不知道如何让它在数组中运行： - /你可以在这里看到http://www.everythingcreative.co.uk/marker

编辑x2： 我已经清理了代码以便于查看，但我仍然不知道如何使按钮与外部链接一起工作。为什么它不适用于IE？

//Retina Images
var RetinaHotelMarker = new google.maps.MarkerImage("./assets/images/global/global_marker_hotel@2x.png", null, null, null, new google.maps.Size(30,30));
var RetinaChurchMarker = new google.maps.MarkerImage("./assets/images/global/global_marker_church@2x.png", null, null, null, new google.maps.Size(30,30));
var RetinaCrosshair = new google.maps.MarkerImage("./assets/images/global/global_marker_crosshair@2x.png", null, null, null, new google.maps.Size(30,30));
var RetinaMarker = new google.maps.MarkerImage("./assets/images/global/global_marker@2x.png", null, null, null, new google.maps.Size(30,30));

//Markers
var markers = [
    [1, 'Great Fosters', 51.416741,-0.543854, RetinaHotelMarker],
    [2, 'St Matthews', 51.432327,-0.459162, RetinaChurchMarker],
    // Staines
    [3, 'Travel Lodge Staines', 51.435698,-0.514469, RetinaMarker],
    [4, 'Thames Lodge Staines', 51.431498,-0.511444, RetinaMarker],
    [5, 'The Boleyn Staines', 51.43218,-0.516293, RetinaMarker],
    [6, 'The Swan Staines', 51.432534,-0.516422, RetinaMarker],
    // Surrey
    [7, 'The Runnymede Hotel', 51.43751,-0.537544, RetinaMarker],
    [8, 'The Wheatsheaf Hotel', 51.409151,-0.592704, RetinaMarker],
    [9, 'The Premier Inn Sunbury', 51.419322,-0.42248, RetinaMarker],
    [10, 'The Crown Chertsey', 51.39181,-0.501861, RetinaMarker],
    // Heathrow
    [11, 'Sofitel Heathrow', 51.473478,-0.49152, RetinaMarker],
    [12, 'Marriott Heathrow', 51.481263,-0.438209, RetinaMarker],
    [13,'Premier Inn Heathrow', 51.481615,-0.482288, RetinaMarker]
];

// Geolocation Success
function success(position) {

// Create Canvas
var mapcanvas = document.createElement('div');
mapcanvas.id = 'global_map_container';
document.querySelector('article').appendChild(mapcanvas);

// Get Geolocation Lat/Lng
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

// Create Geolocation Marker
var GeoMarker = new google.maps.Marker({
    position: coords,
    map: map,
    icon:RetinaCrosshair,
    title:"You are here!",
});

// Map Options
var options = {
    zoom: 12,
    //center: coords,
    center: new google.maps.LatLng(51.416741,-0.543854),
    mapTypeControl: false,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

// Create Map
var map = new google.maps.Map(document.getElementById("global_map_container"), options);

// Marker Control
var infowindow = new google.maps.InfoWindow(), marker, i;
var bounds = new google.maps.LatLngBounds();

// Marker Creation
for (i = 0; i < markers.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[i][2], markers[i][3]),
        map: map,
        flat: true,
        icon: markers[i][4]
    });

    // Find Bounds  
    bounds.extend(marker.getPosition());

    // Marker Center
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            // Center on marker
            map.setCenter(marker.getPosition());
            infowindow.setContent(markers[i][1]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}

// Make Map fit all Markers
map.fitBounds(bounds);

//Button Controls
google.maps.event.addDomListener(document.getElementById("Map_GeoLocation"),"click", function() { 
    map.setCenter(GeoMarker.getPosition() );
});

}

// Run GeoLocation check
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success);
} else {
  error('Geo Location is not supported');
}

HTML：

<li><a href="#" id="Map_GeoLocation" class="global_crosshair"><span>Find Me</span></a></li>
<li><a href="#" id="Map_Church" class="global_church"><span>The Church</span></a></li>
<li><a href="#" id="Map_Hotel"class="global_hotel"><span>The Venue</span></a></li>

使用外部链接和重置来居中和打开信息窗口

0 个答案: