简体   繁体   中英

Javascript - Google Maps v3 - Get positions of markers

Thanks to this site and your help, I have almost finished my Googlemaps script. There is one more thing, I need your help with:

I have multiple markers on my map.

I would like to:

-save each marker position in a variable
-make external links below the map which link to the markers
-change mapcenter on click of these links (described above)

Here is my script so far:

   <script type="text/javascript">
    var offender_locations = [
        ["10001", "Title 2", "icon.png"],
        ["10002", "Title 3", "icon.png"],
        ["10010", "home", "icon.png"]
    ];

    var myOptions = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("results_map"), myOptions);
    var latlng = new google.maps.LatLng(0, 0);

    for (i = 0; i < offender_locations.length; i++) {
        var infowindow = new google.maps.InfoWindow(),
            geocoder_map = new google.maps.Geocoder(),
            address = offender_locations[i][0],
            icon_img = offender_locations[i][2];
        (function(addr, img, i) {
            geocoder_map.geocode({
                'address': addr
            }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: map.getCenter(),
                        icon: img
                    });
                    google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                            infowindow.setContent(offender_locations[i][1]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));

                } else {
                    alert("error!");
                }
            });
        }(address, icon_img, i));
    }

    function zoomin() {
        map.setZoom(15);
    };

    function zoomout() {
        map.setZoom(15);
    }
</script>

The last two small functions are for the click even of the external links. at this moment they only change the zoom level and do not change the map center.

Try pushing your markers to an array so you can look at them later.

At the beginning do var markers = [];

Then after each marker declaration markers.push(marker); .

You can also use object to store your markers or other layers in case you want to access them later by primary key:

var markers = {};

markers['car_1'] = marker;

//change the position of 'car_1'
markers['car_1'].setPosition(x,y);

//you also can create much more complex structure like this
marker['car_2'] = {'title': 'Car 1', _ref: marker};

//change the position of 'car_2'
markers['car_2']._ref.setPosition(x,y);

Attention: make sure your object keys(in our case: car_1, car_2) are not the same(primary key).

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM