0

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

我按照这篇文章得到了我的以下代码（有一些修改）：

<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 变量中提取的变量 origin - var origin = new google.maps.LatLng(lat,lng);）。我还需要这个标记有一个与之关联的不同图标（base_Icon_festival和shadow_festival分别）。

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

最终目标：在地图中心有一个节日图标标记，周围有一些公共交通标记，生成的代码可以在网站的各个节日页面上显示。

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

4

1 回答 1

0

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

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 
});

这段代码可能会添加到回调函数的末尾，如果你不需要实际的标记对象来做其他事情，你可以只创建标记对象并且永远不要分配它。

这里有一个来自 Google Maps API 文档的示例。

于 2013-11-07T17:23:09.823 回答