在Google地图中创建带有多个标记的地理标记标记

时间:2014-11-25 21:13:38

标签: google-maps geolocation google-maps-markers

我一直坚持这个问题一段时间,并且可以真正使用一些帮助。在Google地图中,我有一个标记列表,这些标记被视为markerArray,带有自己的自定义图标。但是,除了显示这些标记之外,我还希望它能够创建一个放置在用户地理标记位置的标记。我已经尝试合并我在堆栈溢出时遇到的建议,并成功地让用户浏览器根据地理位置使地图居中,但每当我尝试在标准var =位置之外添加标记时,所有标记消失了。我正在提供我的工作代码,它只是缺少添加“当前位置”标记的功能。如果有人有任何意见,我会很激动。

var map = null;
    var markerArray = [];
    function initialize() {
        var myOptions = {
            zoom: 13,
            center: new google.maps.LatLng(40.746613, -73.990109),
            mapTypeControl: false,
            navigationControl: false,
            streetViewControl: false,
            zoomControl: false,
            styles: [{featureType:"landscape",stylers:[{saturation:-100},{lightness:65},{visibility:"on"}]},{featureType:"poi",stylers:[{saturation:-100},{lightness:51},{visibility:"simplified"}]},{featureType:"road.highway",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"road.arterial",stylers:[{saturation:-100},{lightness:30},{visibility:"on"}]},{featureType:"road.local",stylers:[{saturation:-100},{lightness:40},{visibility:"on"}]},{featureType:"transit",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"administrative.province",stylers:[{visibility:"off"}]/**/},{featureType:"administrative.locality",stylers:[{visibility:"off"}]},{featureType:"administrative.neighborhood",stylers:[{visibility:"on"}]/**/},{featureType:"water",elementType:"labels",stylers:[{visibility:"on"},{lightness:-25},{saturation:-100}]},{featureType:"water",elementType:"geometry",stylers:[{hue:"#ffff00"},{lightness:-25},{saturation:-97}]}]

        };
        map = new google.maps.Map(document.getElementById('map'), myOptions);
            if (navigator.geolocation) {
                     navigator.geolocation.getCurrentPosition(function (position) {
                         initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                         map.setCenter(initialLocation);
                     });
                 }

        google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
        });
            var locations = [
                    ['90 West Apartment', 40.709943, -74.014430, 7, 'images/pin2.png'],
                    ['Caffe Vita', 40.719652, -73.988411, 6, 'images/pin1.png'],
                ['Croxleys Ale House', 40.722480, -73.983386, 5, 'images/pin1.png'],
                ['Grays Papaya', 40.778291, -73.981829, 4, 'images/pin2.png'],
                ['The Back Room', 40.718723, -73.986913, 3, 'images/pin1.png'],
                ['MUD Coffee', 40.729912, -73.990678, 2, 'images/pin1.png'],
                ['Nurse Bettie', 40.718820, -73.986863, 1, 'pin2.png']];
        for (var i = 0; i < locations.length; i++) {
            createMarker(new google.maps.LatLng(locations[i][1], locations[i][2]),locations[i][0], locations[i][3], locations[i][4]);
        }

        mc.addMarkers(markerArray, true);
    }

    var infowindow = new google.maps.InfoWindow({
        size: new google.maps.Size(150, 50)
    });

    function createMarker(latlng, myTitle, myNum, myIcon) {
        var contentString = myTitle;
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: myIcon,
            zIndex: Math.round(latlng.lat() * -100000) << 5,
            title: myTitle
        });

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

        markerArray.push(marker);
    }

    window.onload = initialize;

1 个答案:

答案 0 :(得分:0)

让我们试一试。

将其放入initialize()navigator.geolocation.getCurrentPosition(showPosition);

然后定义showPosition:

&#13;
&#13;
var showPosition = function (position) {
    var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    // Do whatever you want with userLatLng.
    var marker = new google.maps.Marker({
        position: userLatLng,
        title: 'Your Location',
        map: map
    });
}
&#13;
&#13;
&#13;