Google API v3 设置Icon问题处理

1、查看API实现

//虽然比较符合API实现的思想但这个没法;
//会产生Uncaught TypeError: undefined is not a function 
//google API no example to using it
var icon = new google.maps.Icon({
    anchor:new google.maps.Point(0,0),
    origin:new google.maps.Point(0,0),
    scaledSize: new google.maps.Size(10,10),
    size: new google.maps.Size(10,10),
    url:"http://maps.google.com/mapfiles/kml/paddle/purple-square.png"
});

再次尝试,又能肿么的

// the same problem
//Uncaught TypeError: undefined is not a function 
//no construction !!!!my dear
function  getIconByUrl(imgurl,size..){
  var icon=new google.maps.Icon();
  icon.url=imgurl;
  icon.......
}

调用不成功,好悲催的一段经历!!!
2、查找解决方案

最终在:http://stackoverflow.com/questions/14679696/failed-to-instantiate-google-maps-icon 找到答案(get solution)。

 var image = {url: 'https://developers.google.com/maps/documentation/javascript/examples/images/beachflag.png',
        size: new google.maps.Size(20, 32),
        origin: new google.maps.Point(0,0),
        anchor: new google.maps.Point(0, 32)};

      var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          icon: image,
      });

3、最终实现的可用的ICON获取方法

function getIcon(imageUrl,size){
         var imgSize=size||32;
         var offSize=imgSize/2;
         var defaultSize=new google.maps.Size(imgSize, imgSize);
         var myIcon={
                  url: imageUrl,
                  size: defaultSize,
                  scaledSize:new google.maps.Size(imgSize,imgSize),
                  origin: new google.maps.Point(0,0),
                  anchor: new google.maps.Point(offSize,offSize)
         };
        return myIcon;
   }

注意(notice):The scaledSize like a box's size ,we can use it to load  a image.When you set the image's size better set the size as same as the scaledSize which you want ! 即 scaledSize就像是一个装载图片的箱子,箱子有多大图片就显示多大,在设置图片的大小的时候最好设置为图片的大小,这样显示的图片就是你想要的了。

原文地址:https://www.cnblogs.com/boonya/p/3293289.html