在Google地圖中按類型顯示自定義圖片標記圖標。

我修改了Google Maps API V3複雜圖標示例https://developers.google.com/maps/documentation/javascript/examples/icon-complex以從數組中提取數據並在每個標記位置顯示自定義信息窗口內容和標題。我還想根據「位置」數組中具有不同「開放」，「封閉」，「公共」或「完整」圖像圖標的各個項目說明顯示特定的自定義圖像圖標。在Google地圖中按類型顯示自定義圖片標記圖標。

如何正確創建一個圖像變量，在創建新標記時循環訪問數組，並以與標題和信息窗口文本相同的方式從「位置」數組中提取特定數據？

完整的HTML和Javascript。

<script 
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=weather"> 
</script> 

<script type="text/javascript"> 



var locations = 
[ 

    ['Coogee Beach', -33.923036, 151.259052, 5, 20, "Closed",], 
    ['Cronulla Beach', -34.028249, 151.157507, 3, 50 ,"Full",], 
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2, 10, "Public",], 
    ['Maroubra Beach', -33.950198, 151.259302, 1, 30, "Open",] 
    ]; 

    //json array 

function initialize() { 

var myOptions = { 
    center: new google.maps.LatLng(33.890542, 151.274856), 
    zoom: 8, 


panControl:false, 
zoomControl:false, 
mapTypeControl:true, 
scaleControl:false, 
streetViewControl:false, 
overviewMapControl:false, 
rotateControl:false, 
mapTypeControlOptions: { 
    style:google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
    position:google.maps.ControlPosition.BOTTOM_LEFT 
}, 
mapTypeId: google.maps.MapTypeId.HYBRID 
}; 
var map = new google.maps.Map(document.getElementById("default"), 
    myOptions); 

setMarkers(map, locations)

}

function setMarkers(map,locations){

//添加標記到地圖

//標記尺寸被表示爲X，Y 的尺寸//其中所述圖像的原點（0 ，0）位於圖像左上角的 //。

//起始點，標記位置和標記的座標 //沿X方向向右增加，並沿着Y方向向下增加。

var weatherLayer = new google.maps.weather.WeatherLayer({ 
    temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT 

    }); 
weatherLayer.setMap(map); 

var cloudLayer = new google.maps.weather.CloudLayer(); 
cloudLayer.setMap(map); 





var image = new google.maps.MarkerImage('images/beachflag.png', 
    // This marker is 32 pixels wide by 37 pixels tall. 
    new google.maps.Size(32, 37), 
    // The origin for this image is 0,0. 
    new google.maps.Point(0,0), 
    // The anchor for this image is the base of the flagpole at 0,37. 
    new google.maps.Point(0, 37));   

var shadow = new google.maps.MarkerImage('images/shadow-beachflag.png', 
    // The shadow image is larger in the horizontal dimension 
    // while the position and offset are the same as for the main image. 
    new google.maps.Size(51,37), 
    new google.maps.Point(0,0), 
    new google.maps.Point(0, 37)); 
    // Shapes define the clickable region of the icon. 
    // The type defines an HTML <area> element 'poly' which 
    // traces out a polygon as a series of X,Y points. The final 
    // coordinate closes the poly by connecting to the first 
    //var icon = typeObject[markers1[i][3]]['icon']; 
    // coordinate. 
var shape = { 
     coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
     type: 'poly'// 
    }; 




    var marker, i 

for (i = 0; i < locations.length; i++) 
{ 

var project = locations[i][0] 
var lat = locations[i][1] 
var long = locations[i][2] 
var add = locations[i][3] 
var complete = locations[i][4] 
var percentage = locations[i][4] 


latlngset = new google.maps.LatLng(lat, long); 

var marker = new google.maps.Marker({ 
     map: map, 
title: project , position: latlngset, icon: image, shadow: shadow, 

    }); 
    map.setCenter(marker.getPosition()) 


    var content = 
    '<div id="content">'+ 
    '<h1 id="firstHeading" </h1>'+ 
    project + 

    '</h1>' + 
    " # of Life Guards: " + 
    add + 
    '</h3>' + 
    " | Percentage: " 
    + complete; 
    //infobox content 

    var infowindow = new google.maps.InfoWindow() 
      maxwidth:800, 
google.maps.event.addListener(marker,'click', 

(function(marker,content,infowindow){ 
    return function() { 
     infowindow.setContent(content); 
     infowindow.open(map,marker); 

    }; 

    })(marker,content,infowindow)); 

    } 
    }

來源

2013-08-30 DigitalBayou

如果你只有4分的描述，一種解決方案是具有圖像圖標命名與您的描述：

Open.png，Closed.png，Public.png，Full.png（文件夾內全部「圖片/」）

然後，你可以簡單地做：

var description = locations[i][5]; 
var iconname = 'images/' + description + '.png'; 

var marker = new google.maps.Marker({ 
    map: map, 
    title: project, 
    position: latlngset, 
    icon: iconname, 
    shadow: shadow 
    });

，或者，如果你想繼續使用google.maps.MarkerImage：

var description = locations[i][5]; 
var iconname = 'images/' + description + '.png'; 

var image = new google.maps.MarkerImage(iconname, 
    // This marker is 32 pixels wide by 37 pixels tall. 
    new google.maps.Size(32, 37), 
    // The origin for this image is 0,0. 
    new google.maps.Point(0,0), 
    // The anchor for this image is the base of the flagpole at 0,37. 
    new google.maps.Point(0, 37));  

etc...

如果你想爲你的圖標添加陰影，你可以採用類似的方法。

來源

2013-08-30 07:13:12 fitch496

在Google地圖中按類型顯示自定義圖片標記圖標。

回答

相關問題