使用带有2个标记的Google地图

Question

此代码向我显示带有1个标记的Google地图：

var myCenter=new google.maps.LatLng(47.406466,8.5505948);
function initialize() {
    var roadAtlasStyles = [{
        "featureType": "road.highway",
        "elementType": "geometry",
        "stylers": [
            { "saturation": -100 },
            { "lightness": -8 },
            { "gamma": 1.18 }
        ]
    }, {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
            { "saturation": -100 },
            { "gamma": 1 },
            { "lightness": -24 }
        ]
    }, {
        "featureType": "poi",
        "elementType": "geometry",
        "stylers": [
            { "saturation": -100 }
        ]
    }, {
        "featureType": "administrative",
        "stylers": [
            { "saturation": -100 }
        ]
    }, {
        "featureType": "transit",
        "stylers": [
            { "saturation": -100 }
        ]
    }, {
        "featureType": "water",
        "elementType": "geometry.fill",
        "stylers": [
            { "saturation": -100 }
        ]
    }, {
        "featureType": "road",
        "stylers": [
            { "saturation": -100 }
        ]
    }, {
        "featureType": "administrative",
        "stylers": [
            { "saturation": -100 }
        ]
    }, {
        "featureType": "landscape",
        "stylers": [
            { "saturation": -100 }
        ]
    }, {
        "featureType": "poi",
        "stylers": [
            { "saturation": -100 }
        ]
    }, 
    {}
    ]

    var mapstyle = [{"stylers": [{ "saturation": -100 },{ "gamma": 1.33 }]}];
    var mapProp = {
        center:myCenter,
        zoom:15,
        styles: mapstyle,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
    var marker=new google.maps.Marker({
        position:myCenter,
        icon:'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ed0e1b'
    });

    marker.setMap(map);
    var infowindow = new google.maps.InfoWindow({
        content:"Geiger AG - Büro und Werkhof<br>Fälmisstrasse 15<br>8833 Samstagern"
    });
    infowindow.open(map,marker,roadAtlasStyles);
}
google.maps.event.addDomListener(window, 'load', initialize);

我想显示另一个标记，其中包含另一个地址。由于我有一些自定义样式，我想保留相同的代码，但只是插入另一个标记。当我想保留自己的代码时，我该怎么做？

Answer 1

不是最干净的方式，但这就是我解决它的方法：

var myCenter = new google.maps.LatLng(47.190627,8.6786925);
        var myOtherCenter = new google.maps.LatLng(47.2296871,8.6718189);

        function initialize() {

        var roadAtlasStyles = [
  {
      "featureType": "road.highway",
      "elementType": "geometry",
      "stylers": [
        { "saturation": -100 },
        { "lightness": -8 },
        { "gamma": 1.18 }
      ]
  }, {
      "featureType": "road.arterial",
      "elementType": "geometry",
      "stylers": [
        { "saturation": -100 },
        { "gamma": 1 },
        { "lightness": -24 }
      ]
  }, {
      "featureType": "poi",
      "elementType": "geometry",
      "stylers": [
        { "saturation": -100 }
      ]
  }, {
      "featureType": "administrative",
      "stylers": [
        { "saturation": -100 }
      ]
  }, {
      "featureType": "transit",
      "stylers": [
        { "saturation": -100 }
      ]
  }, {
      "featureType": "water",
      "elementType": "geometry.fill",
      "stylers": [
        { "saturation": -100 }
      ]
  }, {
      "featureType": "road",
      "stylers": [
        { "saturation": -100 }
      ]
  }, {
      "featureType": "administrative",
      "stylers": [
        { "saturation": -100 }
      ]
  }, {
      "featureType": "landscape",
      "stylers": [
        { "saturation": -100 }
      ]
  }, {
      "featureType": "poi",
      "stylers": [
        { "saturation": -100 }
      ]
  }, {
  }
            ]

        var mapstyle = [{"stylers": [{ "saturation": -100 },{ "gamma": 1.33 }]}];
        var mapProp = {
                center:myCenter,
                zoom:12,
                styles: mapstyle,
                mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            var mapProp1 = {
                center:myOtherCenter,
                zoom:12,
                styles: mapstyle,
                mapTypeId:google.maps.MapTypeId.ROADMAP
            };

            var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
            var map=new google.maps.Map(document.getElementById("googleMap"),mapProp1);

            var marker=new google.maps.Marker({
                  position:myCenter,
                  icon:'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ed0e1b'
              });
            var marker1=new google.maps.Marker({
                  position:myOtherCenter,
                  icon:'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ed0e1b'
              });

            marker.setMap(map);
            marker1.setMap(map);

            var infowindow = new google.maps.InfoWindow({
                content:"Geiger AG - Büro und Werkhof<br>Fälmisstrasse 15<br>8833 Samstagern"
             });
            var infowindow1 = new google.maps.InfoWindow({
                content:"Geiger AG - Postadresse<br>Postfach<br>8820 Wädenswil"
             });
            infowindow.open(map,marker,roadAtlasStyles);
            infowindow1.open(map,marker1,roadAtlasStyles);
        }

        google.maps.event.addDomListener(window, 'load', initialize);

Answer 2

我清理了一点我也创建了一个创建markersData的函数，如果你想添加更多的标记只是添加到markersData数组中，那就好了:)也许你想添加不同的图标，只需将其添加到(function(){ var map; var mapslatlng = {lat: 47.406466, lng: 8.5505948}; var markers = []; var markersData = [ ['marker 1', 47.406466, 8.5505948], ['marker 2', 47.406466, 8.5565948] ]; function initialize() { var mapOptions = { center: mapslatlng, mapTypeId: google.maps.MapTypeId.TERRAIN, zoom: 15 }; map = new google.maps.Map(document.getElementById('mapDiv'), mapOptions); mapStyle(); addMarker(); } function mapStyle() { var usRoadMapType = new google.maps.StyledMapType([ { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "saturation": -100 }, { "lightness": -8 }, { "gamma": 1.18 } ] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [ { "saturation": -100 }, { "gamma": 1 }, { "lightness": -24 } ] }, { "featureType": "poi", "elementType": "geometry", "stylers": [ { "saturation": -100 } ] }, { "featureType": "administrative", "stylers": [ { "saturation": -100 } ] }, { "featureType": "transit", "stylers": [ { "saturation": -100 } ] }, { "featureType": "water", "elementType": "geometry.fill", "stylers": [ { "saturation": -100 } ] }, { "featureType": "road", "stylers": [ { "saturation": -100 } ] }, { "featureType": "administrative", "stylers": [ { "saturation": -100 } ] }, { "featureType": "landscape", "stylers": [ { "saturation": -100 } ] }, { "featureType": "poi", "stylers": [ { "saturation": -100 } ] } ], {name: 'Road Atlas'}); map.mapTypes.set('usroadatlas', usRoadMapType); map.setMapTypeId('usroadatlas'); } function addMarker() { for (var i = 0; i < markersData.length; i++) { var marker = markersData[i]; markers.push(new google.maps.Marker({ position: {lat: marker[1], lng: marker[2]}, title: marker[0], map: map, draggable: true })); }; } google.maps.event.addDomListener(window, 'load', initialize); })(); 数组

class Listicle < ActiveRecord::Base
...
 has_many :listicle_sticker_tags, -> { order(listicle_sticker_id: :asc) }, class_name: 'ListicleStickerTag', dependent: :destroy
  accepts_nested_attributes_for :listicle_sticker_tags, allow_destroy: true
end


class ListicleStickerTag < ActiveRecord::Base
  belongs_to :listicle
  belongs_to :listicle_sticker
end