Question

我需要在第一次加载时在地图上显示所有标记，并加载第一个标记（带阴影的蓝色标记），以便在第一次单击时打开infoWindow。任何有用的建议？这是它的样子：http://jsfiddle.net/robzor2014/ye3x8/35/

$(document).ready(function () {
initialize();

$("#link1").click(function () {
    changeMarkerPos(38.571924, -122.555494);
    makeMarker({
        position: new google.maps.LatLng(38.571924, -122.555494),
        title: 'Clos Pegase',
        content: '<div style="height:150px; width:350px;"><img style="float:right;"src="http://www.clospegase.com/static/images/closPegaseMap.jpg"><h2>Clos Pegase</h2>Lorem ipsum dolor sit amet</div>',
        icon: 'http://www.clospegase.com/static/images/pegase.png'
    });
    makeMarker.open(map, marker);
});

$("#link2").click(function () {
    changeMarkerPos(38.40411, -122.36469);
    makeMarker({
        position: new google.maps.LatLng(38.40411, -122.36469),
        title: 'Girard',
        icon: 'http://www.clospegase.com/static/images/girard.png',
        content: '<div style="height:150px; width:350px;"><img style="float:right;"src="http://www.clospegase.com/static/images/closPegaseMap.jpg"><h2>Girard</h2>Lorem ipsum dolor sit amet<div>'
    });
    makeMarker.setMap(map);
});

$("#link3").click(function () {
    changeMarkerPos(38.29186, -122.45804);
    makeMarker({
        position: new google.maps.LatLng(38.29186, -122.45804),
        title: 'Kunde',
        icon: 'http://www.clospegase.com/static/images/kunde.png',
        content: '<div style="height:150px; width:350px;"><img style="float:right;"src="http://www.clospegase.com/static/images/closPegaseMap.jpg"><h2>Kunde</h2>Lorem ipsum dolor sit amet<div>'
    });
});

$("#link4").click(function () {
    changeMarkerPos(38.41461, -122.54650);
    makeMarker({
        position: new google.maps.LatLng(38.41461, -122.54650),
        title: 'Viansa',
        icon: 'http://www.clospegase.com/static/images/viansa.png',
        content: '<div style="height:150px; width:350px;"><img style="float:right;"src="http://www.clospegase.com/static/images/closPegaseMap.jpg"><h2>Viansa</h2>Lorem ipsum dolor sit amet<div>'
    });
});

function initialize() {

    var styles = [{
        stylers: [{
            saturation: -100
        }]
    }];

    var styledMap = new google.maps.StyledMapType(styles, {
        name: "Styled Map"
    });

    var mapProp = {
        center: new google.maps.LatLng(38.571924, -122.555494),
        zoom: 10,
        panControl: true,
        zoomControl: true,
        mapTypeControl: true,
        scaleControl: true,
        streetViewControl: true,
        overviewMapControl: false,
        rotateControl: true,
        scrollwheel: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP

    };

    map = new google.maps.Map(document.getElementById("map_canvas"), mapProp);

    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style')

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(38.571924, -122.555494),
        animation: google.maps.Animation.DROP,
        title: 'Clos Pegase',

        icon: 'http://www.clospegase.com/static/images/main.png'
    });

    marker.setMap(map);
    map.panTo(marker.position);


    $()
}

function changeMarkerPos(lat, lon) {
    myLatLng = new google.maps.LatLng(lat, lon)
    marker.setPosition(myLatLng);
    map.panTo(myLatLng);
}

function makeInfoWindowEvent(map, infowindow, marker) {
    google.maps.event.addListener(marker, 'click', function () {
        infowindow.open(map, marker);

    });
}


var infoWindow = new google.maps.InfoWindow();
var markerBounds = new google.maps.LatLngBounds();
var markerArray = [];

function makeMarker(options) {
    var pushPin = new google.maps.Marker({
        map: map
    });
    pushPin.setOptions(options);
    google.maps.event.addListener(pushPin, 'click', function () {
        infoWindow.setOptions(options);
        infoWindow.open(map, pushPin);
    });
    markerArray.push(pushPin);
    return pushPin;
}
google.maps.event.addListener(map, 'click', function () {
    infoWindow.close();
});

function openMarker(i) {
    google.maps.event.trigger(markerArray[i], 'click');
};

});

Answer 1

您最初只向地图添加一个标记：

marker = new google.maps.Marker({
    position: new google.maps.LatLng(38.571924, -122.555494),
    animation: google.maps.Animation.DROP,
    title: 'Clos Pegase',

    icon: 'http://www.clospegase.com/static/images/main.png'
});

marker.setMap(map);
map.panTo(marker.position);

只有在您点击链接时才会添加其他标记（这也会添加您要查找的信息窗口功能）：

$("#link2").click(function () {
    changeMarkerPos(38.40411, -122.36469);
    makeMarker({
        position: new google.maps.LatLng(38.40411, -122.36469),
        title: 'Girard',
        icon: 'http://www.clospegase.com/static/images/girard.png',
        content: '<div style="height:150px; width:350px;"><img style="float:right;"src="http://www.clospegase.com/static/images/closPegaseMap.jpg"><h2>Girard</h2>Lorem ipsum dolor sit amet<div>'
    });
    makeMarker.setMap(map);
});

Google Maps API - 首次加载时不会显示所有标记

1 个答案: