Question

很抱歉，如果这是一个真正的菜鸟问题，但我永远无法理解谷歌地图API。

以下是我的谷歌地图的JS代码。我只是想简单地添加另一个标记，并在单击标记时弹出标题。有人能告诉我这是怎么做到的吗？

// Init Google Maps
function initGoogleMaps() {
  // Init on contact page
  if ($('#contact-map').length > 0) {
    var myLatlng = new google.maps.LatLng(50.373667, -4.138203),
    mapOptions = {
        center: myLatlng,
        zoom: 10,
        icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
        mapTypeId: google.maps.MapTypeId.MAP,
        scrollwheel: false
        // disableDefaultUI: true
    },

    map = new google.maps.Map(document.getElementById("contact-map"), mapOptions),

    marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
        title: "Come visit us"
    });
  }
}
initGoogleMaps();

Answer 1

添加infowindow

infowindow = new google.maps.InfoWindow(),

在标记处添加“click”侦听器以将其打开：

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

添加第二个标记并单击它的监听器：

    marker2 =  new google.maps.Marker({
    position: myLatlng2,
    map: map,
    icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
    title: "Come visit us here also"
})
google.maps.event.addListener(marker2,'click',function(e) {
    infowindow.setContent(marker2.getTitle());
    infowindow.open(map,marker2);
});

proof of concept fiddle

代码段

// Init Google Maps
function initGoogleMaps() {
  // Init on contact page
  if ($('#contact-map').length > 0) {
    var myLatlng = new google.maps.LatLng(50.373667, -4.138203),
      myLatlng2 = new google.maps.LatLng(50.37, -4.2)
    mapOptions = {
        center: myLatlng,
        zoom: 10,
        icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
        mapTypeId: google.maps.MapTypeId.MAP,
        scrollwheel: false
          // disableDefaultUI: true
      },

      map = new google.maps.Map(document.getElementById("contact-map"), mapOptions),
      infowindow = new google.maps.InfoWindow(),
      marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
        title: "Come visit us"
      }),
      marker2 = new google.maps.Marker({
        position: myLatlng2,
        map: map,
        icon: 'http://goodmans.co.uk.s171938.gridserver.com/images/23.png',
        title: "Come visit us here also"
      })
    google.maps.event.addListener(marker, 'click', function(e) {
      infowindow.setContent(marker.getTitle());
      infowindow.open(map, marker);
    });
    google.maps.event.addListener(marker2, 'click', function(e) {
      infowindow.setContent(marker2.getTitle());
      infowindow.open(map, marker2);
    });

  }
}
initGoogleMaps();

html,
body,
#contact-map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="contact-map" style="border: 2px solid #3872ac;"></div>

Answer 2

试试这个：

function initMap() {
    var uluru = {lat: -25.363, lng: 131.044};
    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
 });

 var contentString = 'html string';

 var infowindow = new google.maps.InfoWindow({
   content: contentString
 });

 var marker = new google.maps.Marker({
   position: uluru,
   map: map,
   title: 'Uluru (Ayers Rock)'
 });
 marker.addListener('click', function() {
   infowindow.open(map, marker);
 });
}

Google地图添加新标记和弹出标题

2 个答案: