谷歌离线地图 教程

定制标记图像

编辑时间:2017-03-03

QQ截图20170303104843.png

  简单的图标

  在最基本的情况下,图标可以简单地表示一个要代替默认的 Google Maps 图钉图标的图像。要指定这样的图

标,请将标记的 icon 属性设置为某个图像的 URL。Google Maps API 将自动调整图标大小。

简单图标代码如下:

marker = new google.maps.Marker({
   
position: new google.maps.LatLng(30.54024807, 104.06966686),
   
title:'Hello World!',
   
draggable: true,
   
icon:'2.png',
   
animation: google.maps.Animation.DROP,
   
map:map
});


复杂的图标

您也许想要指定复杂的形状来表示可点击的区域,并指定这些图标相对于其他叠层的显示方式(即它们的“叠放

顺序”)。以这种方式指定的图标应该将其 icon 属性设置为一个 Icon 类型的对象。

Icon 对象定义了一个图像。该对象还定义了图标的 size(大小)、图标的 origin(原点,例如当您想要

的图像是一个较大图像的一部分时),以及 anchor(锚点),锚点是图标热点的所在之处(基于原点)。


var image = {
      
url: '2.png',
     
//标注的大小32*32像素
    
size: new google.maps.Size(32, 32),
      
//标注的原点是00
      
origin: new google.maps.Point(0, 0),
      
// 锚点在底边上
     
anchor: new google.maps.Point(0, 32)
};

marker = new google.maps.Marker({
   
position: new google.maps.LatLng(30.54024807, 104.06966686),
   
title:'Hello World!',
   
draggable: true,
   
icon:image,
   
zIndex:100,
   
animation: google.maps.Animation.DROP,
   
map:map
});