谷歌在一张地图上映射两个标记

时间:2016-03-14 23:37:05

标签: angularjs cordova google-maps visual-studio-cordova onsen-ui

大家好我以下使用此代码,但我不知道是否有可能 以及如何添加更多一个标记并设置其他DIV来显示此位置。 任何人都知道我能做什么或给我一个提示

它是视觉工作室的cordova应用程序

angular.module('app', ['onsen']).
    directive('myMap', function () {
        // directive link function
        var link = function (scope, element, attrs) {
            var map, infoWindow;
            var markers = [];

            // map config
            var mapOptions = {
                center: new google.maps.LatLng(-29.3130754, -50.8542323),
                zoom: 11,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: false
            };

            // init the map
            function initMap() {
                if (map === void 0) {
                    map = new google.maps.Map(element[0], mapOptions);
                }
            }

            // place a marker
            function setMarker(map, position, title, content) {
                var marker;
                var markerOptions = {
                    position: position,
                    map: map,
                    title: title,
                    icon: 'images/Maps/blue-dot.png'
                };

                marker = new google.maps.Marker(markerOptions);
                markers.push(marker); // add marker to array

                google.maps.event.addListener(marker, 'click', function () {
                    // close window if not undefined
                    if (infoWindow !== void 0) {
                        infoWindow.close();
                    }
                    // create new window
                    var infoWindowOptions = {
                        content: content
                    };
                    infoWindow = new google.maps.InfoWindow(infoWindowOptions);
                    infoWindow.open(map, marker);
                });
            }

            // show the map and place some markers
            initMap();

            setMarker(map, new google.maps.LatLng(-29.3130754, -50.8542323), 'adress');

        };

        return {
            restrict: 'A',
            template: '<div id="gmaps"></div>',
            replace: true,
            link: link
        };
    });

1 个答案:

答案 0 :(得分:1)

以下是在Google地图上添加多个标记的方法,您只需要一个包含所需纬度经度值的数组。

var myLatLng = {lat: -25.363, lng: 131.044};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: myLatLng
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });
    var myLatLng1={lat: -25.163, lng: 131.644};
    var marker2 = new google.maps.Marker({
      position: myLatLng1,
      map: map,
      title: 'Hello World!'
    });

你也可以有一个数组,其中包含包含latutude和经度值的数组元素。

        for (var i = 0; i < locations.length; i++) {  //Your location contains the lat long position 
        var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        title: 'Hello World!'
      });