Question

我的javascript不太热，我正在尝试将手动标记添加到从Google Places API收集的多个位置。

我按照 this post 来查看以下代码（稍加修改）：

<script type="text/javascript">
      var map;
      var infowindow;
      var service ;
    base_Icon_festival = "https://maps.gstatic.com/mapfiles/ms2/micons/volcano.png";
    shadow_festival = "https://maps.gstatic.com/mapfiles/ms2/micons/volcano.shadow.png";

      function initialize(lat,lng) 
      {
        var origin = new google.maps.LatLng(lat,lng);

        map = new google.maps.Map(document.getElementById('map'), {
          mapTypeId: google.maps.MapTypeId.HYBRID,
          center: origin,
          zoom: 14,
      scrollwheel: false,

        });

        var request = {
          location: origin,
          radius: 2500,
          types: ['train_station','bus_station','subway_station','airport']
        };
        infowindow = new google.maps.InfoWindow();
        service = new google.maps.places.PlacesService(map);
        service.search(request, callback);
      }

      function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
          }
        }
      }

    base_Icon_train = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";               
        base_Icon_bus = "http://maps.google.com/mapfiles/ms/icons/green-dot.png";  
        base_Icon_subway = "http://maps.google.com/mapfiles/ms/icons/blue-dot.png";   
        base_Icon_airport = "http://maps.google.com/mapfiles/ms/icons/yellow.png";  

      function createMarker(place) {

    var placeLoc = place.geometry.location;
        var marker;
        var icon_to_use;

    if (place.types.indexOf('train_station') != -1) {
           icon_to_use = base_Icon_train;
    } else if (place.types.indexOf('bus_station') != -1) {
           icon_to_use = base_Icon_bus;
    } else if (place.types.indexOf('subway_station') != -1) {
           icon_to_use = base_Icon_subway;
    } else if (place.types.indexOf('airport') != -1) {
           icon_to_use = base_Icon_airport;
    } 

marker = new google.maps.Marker({
      map: map,
      position: place.geometry.location,
    icon: icon_to_use  
    });

        var content='<strong style="font-size:1.2em">'+place.name+'</strong>'+
                    '<br/><strong>Latitude: </strong>'+placeLoc.lat()+
                    '<br/><strong>Longitude: </strong>'+placeLoc.lng()+
                    '<br/><strong>Type: </strong>'+place.types[0];

        //make a request for further details
        service.getDetails({reference:place.reference}, function (place, status) 
                                    {
                                      if (status == google.maps.places.PlacesServiceStatus.OK) 
                                      {
                                        more_content='<hr/><strong><a href="'+place.url+'" target="details">Details</a>';

                                        if(place.website)
                                        {
                                          more_content+='<br/><br/><strong><a href="'+place.website+'" target="details">'+place.website+'</a>';
                                        }
                                      }
                                    });


        google.maps.event.addListener(marker, 'click', function() {

          infowindow.setContent(content+more_content);
          infowindow.open(map, this);
        });

      }

      google.maps.event.addDomListener(window, 'load', function(){initialize(<?php echo $coordinated; ?>);});
    </script>
    <div id="map" style="height:400px;"></div>

现在我想手动添加另一个位于地图中心的标记（即，当前从PHP变量中提取的变量原点 - var origin = new google.maps.LatLng(lat,lng);）。我还需要这个标记有一个与之关联的不同图标（分别为base_Icon_festival和shadow_festival）。

我不确定如何手动将另一个标记添加到places API已经收集的标记？

结束目标：在地图中心放置一个节日图标标记，并在其周围放置一些公共交通标记，从而使代码可以在网站的各个节日页面上显示。

提前感谢任何可以提供帮助的人。

Answer 1

在Google Maps API中，通过创建标记对象并设置地图属性，可以将标记添加到地图中。这是代码中添加现有标记的代码段。

marker = new google.maps.Marker({
  map: map,
  position: place.geometry.location,
  icon: icon_to_use  
});

要添加新标记，您只需用您的值替换位置和图标属性。

new google.maps.Marker({
  map: map,
  position: origin,
  icon: shadow_festival 
});

这段代码可能会在Callback函数的末尾添加，如果你不需要其他任何实际的标记对象，你可以创建Marker对象，而不是分配它。

Google Maps API文档here中有一个示例。

Google Places API，其他标记（手动添加）到结果中

1 个答案: