带有SSL的Google Maps API自定义图标

问题描述：

我有一个Google地图应用程序，我想放置自定义图标，而不是通常显示的通用红色图标。但不管我做什么，我都不能设置一个不同的图标，它总是显示为红色。我读过你无法在图标的url中使用https，因此我将其上传到图像主机，但仍无法更改图标。我如何在地图上获得自定义图标，还是必须与bing一起去？带有SSL的Google Maps API自定义图标

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var mapOptions = { 
     zoom: 10, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    } 

    function codeAddress() { 
    initialize(); 
    var address = document.getElementById("address").value; 
    range = document.getElementById("distance").value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      map: map, 
      icon: "http://labs.google.com/ridefinder/images/mm_20_red.png" 
      position: results[0].geometry.location 

     }); 

     lat1 = results[0].geometry.location.lat(); 
     lng1 = results[0].geometry.location.lng(); 

     } else { 
     alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
    load(); 
    }

通知，它说：

icon: "http://labs.google.com/ridefinder/images/mm_20_red.png"

不是不管我改变过它总是显示红色的通用图标。

显示你尝试... – Musa 2013-03-10 23:20:52

查看{自定义标记的文档（https://developers.google.com/maps/documentation/javascript/overlays#SimpleIcons），告诉我们你的代码是什么样子（应该管用）。 – geocodezip 2013-03-10 23:26:53

答

您可以在页面上的HTTP和HTTPS上加载标记图像。但是，您需要确保该方案与包含页面的方案相匹配（或者至少确保在页面也使用HTTPS）。

看起来您的MarkerOptions对象中有错字：图标字符串后缺少逗号。

var marker = new google.maps.Marker({ 
     map: map, 
     icon: "http://labs.google.com/ridefinder/images/mm_20_red.png", 
     position: results[0].geometry.location 

    });

带有SSL的Google Maps API自定义图标

相关推荐