繁体   English   中英

Google Maps应用中的自定义标记

[英]Custom Markers in Google Maps app

我正在使用google maps javascript应用程序,并且要对其中一个标记使用自定义图像。

这是我想用来获取标记的代码示例。

 var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
 GDownloadUrl(searchUrl, function(data) {
   var xml = GXml.parse(data);
   markers = xml.documentElement.getElementsByTagName('marker');

   var sidebar2 = document.getElementById('sidebar2');
   sidebar2.innerHTML = '';
   if (markers.length == 0) {
     document.getElementById('alert_div').innerHTML = "<a>No Results found</a>";
     document.getElementById('alert_div').style.display = 'block';

     map.setCenter(new GLatLng(40.178873,2.8125), 2);
     return;
   }
   showSidebar();   
   var limitsearch = document.getElementById('limitsearch').value;
   var bounds = new GLatLngBounds();
   if (limitsearch <= markers.length){
   for (var i = 0; i < limitsearch; i++) {
     var name = markers[i].getAttribute('name');
     var phone = markers[i].getAttribute('phone');
     if (phone == 0){phone = '';}
     var address = markers[i].getAttribute('address');
     var distance = parseFloat(markers[i].getAttribute('distance'));
     var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
                             parseFloat(markers[i].getAttribute('lng')));

     var marker = createMarker(point, name, address);
     map.addOverlay(marker);
     var sidebarEntry = createSidebarEntry(marker, phone, name, address, distance);
     sidebar2.appendChild(sidebarEntry);
     bounds.extend(point);
   }}
   else{
   for (var i = 0; i < markers.length; i++) {
     var name = markers[i].getAttribute('name');
     var phone = markers[i].getAttribute('phone');
     if (phone == 0){phone = '';}
     var address = markers[i].getAttribute('address');
     var distance = parseFloat(markers[i].getAttribute('distance'));
     var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
                             parseFloat(markers[i].getAttribute('lng')));

     var marker = createMarker(point, name, address);
     map.addOverlay(marker);
     var sidebarEntry = createSidebarEntry(marker, phone, name, address, distance);
     sidebar2.appendChild(sidebarEntry);
     bounds.extend(point); 
   }

   }




   map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
  showSidebar();
  getAlert();
 });

}

这是createMarker的替代品,以支持图标

function createMarker(point, name, address, markerIcon) {
  var markerOptions = {}
  if (markerIcon !== undefined) {
    markerOptions = { icon: markerIcon };
  }
  marker = new GMarker(point, markerOptions);
  var html = '<b>' + name + '</b> <br/>' + address;
  GEvent.addListener(marker, 'click', function() {
     marker.openInfoWindowHtml(html); 
  });
  return marker; 
}

然后,您可以根据需要传入GIcon对象作为最后一个选项。 您需要像这样初始化它:

var myIcon = new GIcon();
myIcon.iconSize = new GSize(16, 16);
myIcon.iconAnchor = new GPoint(4, 7);
myIcon.image = "http://www.url.com/somepic.png";
var marker = createMarker(point, name, address, myIcon);

您需要确定大小和锚点位置

另请参阅Google文档中的以下资源:

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM