如何在谷歌地图上显示项目类似于谷歌显示其结果的方式

Question

如何在谷歌地图上显示项目类似于谷歌显示其结果的方式

Dan*_*own 14 javascript jquery jsp google-maps google-maps-api-3

我需要显示一个带有多个标记的地图,我发现这个问题有我想要的但问题是我需要显示它旁边的每个项目的标记.

<c:forEach var="product" items="products">
   ${product.name}
</c:forEach>

Run Code Online (Sandbox Code Playgroud)

我也检查了这个问题的答案,但没有多大帮助.

谷歌地图代码

var pinColor = "FE7569";
var marker, i;

var address=[];
address[0] = "New york";
address[1] = "las vegas";
address[2] = "san francisco";
address[3] = "chicago";

// Set default map center location
var latlng = new google.maps.LatLng(latcenter,longcenter);

// Create pinShadow for each marker 
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com        /chart?chst=d_map_pin_shadow",
    new google.maps.Size(40, 37),
    new google.maps.Point(0, 0),
    new google.maps.Point(12, 35));

// Function to create the dynamic marker
function pinImage(i){
    return image = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/"+i+"/"+pinColor+"/", new google.maps.Size(21, 34), new google.maps.Point(0,0), new google.maps.Point(10, 34));
}

// Function to run once page has loaded
    function initialize(){     
   var geocoder=new google.maps.Geocoder(); 
// Set Default settigns for google map
var settings = {
    zoom: 3,
    center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP};

// Start Google Maps and assign it to div on site
var map = new google.maps.Map(document.getElementById("map_canvas"), settings); 
// loop though total numner of address in array
for (var i = 0; i < address.length; i++) {  
   (function(i) {

    // Use geocoder to grab latlong for user inputed address
    geocoder.geocode( { 'address': address[i]}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            // Redefine map center location
            if (i == 1){ map.setCenter(results[0].geometry.location); }

            // Create dynamic markers on map as per the address array
            var marker = new google.maps.Marker({
                map: map, 
                position: results[0].geometry.location,
                title:address[i],
                zIndex: i,
                // PROBLEM CODE --- Using the function below it creates all Markers with a "1" instead of the "i" value..??  
                icon: pinImage(i),
                shadow: pinShadow
            });         
        }
       });
     })(i);
    }
    }
google.maps.event.addDomListener(window, 'load', initialize)

Run Code Online (Sandbox Code Playgroud)

理想的输出类似于下面的图像,每个结果都有一个命名标记,其位置由地图上的相关标记显示.我需要根据坐标而不是地址按字母顺序排列标记.

在此输入图像描述

Answer 1

bre*_*nzy 4

编辑：更改了代码片段以从 Chart.apis.google.com 获取标记图像。（我不确定为什么 googlemapsmarkers.com 停止工作）。

您可以从标记中获取 url，并将其显示为图像。这是一个代码片段来说明：

<!DOCTYPE html>

<head lang="en">
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
  <style>
    #map-canvas,
    #marker-container {
      width: 50%;
      height: 600px;
      margin: 0px;
      padding: 0px;
      float: left;
    }
    .marker-description {
      padding-left: 40px;
    }
    .place {
      padding-left: 10px;
    }
    .marker {
      display: inline-block;
      width: 21px;
      height: 35px;
    }
  </style>
</head>

<body>
  <div id="map-canvas"></div>
  <div id="marker-container"></div>
  <script>
    var map;
    var markers = [];
    var pinColor = "FE7569";

     // Function to create the dynamic marker
    function pinImage(imagenum) {
      // should check for more than 32 pins...
      var ch = 'A'
      var makerLetter = String.fromCharCode(ch.charCodeAt(0) + imagenum);
      return image = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + makerLetter + "|" + pinColor);
    }

    function initialize() {

      var newYork = new google.maps.LatLng(40.7773514, -73.9554338);
      var mapOptions = {
        zoom: 13,
        center: newYork,
        disableDefaultUI: true,
        mapTypeControlOptions: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      var request = {
        location: newYork,
        radius: 5000,
        types: ['store']
      };
      var service = new google.maps.places.PlacesService(map);
      service.nearbySearch(request, callback);
    }

    function callback(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0, marker; marker = markers[i]; i++) {
          marker.setMap(null);
        }
        markers = [];
        $("#marker-container").empty();
        for (i = 0; i < results.length; i++) {
          var place = results[i];
          var placeLoc = place.geometry.location;
          // Create a marker for each place.
          var marker = new google.maps.Marker({
            map: map,
            title: place.name,
            position: place.geometry.location,
            icon: pinImage(i)
          });

          markers.push(marker);
          var description = $("<div class='marker-description'><image class='marker' src='" + marker.icon.url + "'></image><span class='place'>" + place.name + "</span>");
          $("#marker-container").append(description);
        }
      }
    }

    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年前
查看次数：	1463 次
最近记录：	11 年前