Google maps 更改谷歌地图上的图标

Google maps 更改谷歌地图上的图标,google-maps,google-maps-api-3,google-maps-markers,dom-events,Google Maps,Google Maps Api 3,Google Maps Markers,Dom Events,我一直在尝试几个选项,但不幸的是,我无法为不同的位置有不同的图标。我还试图找出为什么天气层可选字段像在其他应用程序中一样是空白的,但它确实起了作用 我将感谢任何帮助 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=en&libraries=weather"></script> <style type="text/c

我一直在尝试几个选项,但不幸的是,我无法为不同的位置有不同的图标。我还试图找出为什么天气层可选字段像在其他应用程序中一样是空白的,但它确实起了作用

我将感谢任何帮助

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=en&libraries=weather"></script>

<style type="text/css">
#apDiv1 {
    position: absolute;
    right: 240px;
    top: 5px;
    width: 160px;
    height: 39px;
    z-index: 1;
    background-color: #ccc;
    overflow: visible;
    opacity: 0.8;
    z-index:1;
}
</style>
<script type="text/javascript">
var map;
var WeatherLayer;
var CloudsLayer;
var zoomLimit = 6;
var dealer_markers = [{
    sales: '1',
    aftersales: '0',
    name: 'Strike in Frankfurt',
    lat: '51.595212',
    lng: '-2.400068',
    adr: '',
    pc: 'In Some Place',
    tel: '21312312312',
    url: '.',
    avr: '',
     position: '1'
},
{
    sales: '0',
    aftersales: '1',
    name: 'Bob Two',
    lat: '52.306323',
    lng: '14.000778',
    adr: 'Some Address',
    pc: 'Some Place',
    tel: '213213123123',
    url: '.',
    avr: '',
    position: '2'
},
{
    sales: '1',
    aftersales: '1',
    name: 'Bob Three',
    lat: '22.742384',
    lng: '-0.488795',
    adr: 'Another address',
    pc: 'More place',
    tel: '23423423423',
    url: '',
    avr: '',
    position: '3'
},
{
    sales: '0',
    aftersales: '1',
    name: 'Bob Two',
    lat: '11.306323',
    lng: '14.000778',
    adr: 'Some Address',
    pc: 'Some Place',
    tel: '213213123123',
    url: '.',
    avr: '',
    position: '4'
},



];



function _newGoogleMapsMarker(param) {
    var r = new google.maps.Marker({

        map: param._map,
        icon:'icon2.gif',
        position: new google.maps.LatLng(param._lat, param._lng),
        title: param._head
    });
    if (param._data) {
        google.maps.event.addListener(r, 'click', function() {
            // this -> the marker on which the onclick event is being attached
            if (!this.getMap()._infoWindow) {
                this.getMap()._infoWindow = new google.maps.InfoWindow();
            }
            this.getMap()._infoWindow.close();
            this.getMap()._infoWindow.setContent(param._data);
            this.getMap()._infoWindow.open(this.getMap(), this);
        });



    }
    return r;
}

function init() {
    var mO = {
        center: new google.maps.LatLng(52.041213, -1.325532),
        zoom: 3,

        panControl:false,
        zoomControl:false,
        mapTypeControl:false,
        scaleControl:false,
        streetViewControl:false,
        overviewMapControl:false,
        rotateControl:false,  
        zoomControl:true,


        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), mO);
    for (var a = 0; a < dealer_markers.length; a++) {
        var tmpLat = dealer_markers[a].lat;
        var tmpLng = dealer_markers[a].lng;
        var tmpName = dealer_markers[a].name;
        var tmpAdr = dealer_markers[a].adr;
        var tmpTel = dealer_markers[a].pc;
        var tmpPc = dealer_markers[a].tel;
        var marker = _newGoogleMapsMarker({
            _map: map,
            _lat: tmpLat,
            _lng: tmpLng,
            _head: '|' + new google.maps.LatLng(tmpLat, tmpLng),
            _data: '<div id="bg">\
        <h2 class="title">' + tmpName + '</h2>\
        <h3 class="address">' + tmpAdr + '</h3>\
        <h3 class="pc">' + tmpPc + '</h3>\
        <h3 class="telephone">' + tmpTel + '</h3>\
        </div>'
        });
    }




            weatherLayer = new google.maps.weather.WeatherLayer({
                temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
            });
            weatherLayer.setMap(map);
            cloudsLayer = new google.maps.weather.CloudLayer();
            //cloudsLayer.setMap(map);

            $('#weather_box').click(function(){
                weatherLayer.setMap($(this).is(':checked') ? map : null);
            });

            $('#clouds_box').click(function(){
                cloudsLayer.setMap($(this).is(':checked') ? map : null);
            });

            $('#weather_box,#clouds_box').removeAttr('disabled');



}


window.onload = init;
</script>
<body>
<div id="apDiv1">
  <input type="checkbox" id="clouds_box" disabled="true">
  clouds 
  <input type="checkbox" id="weather_box" disabled="true" checked>
  weather
</div>
<div id="map" style="width:1300px; height:800px;border:1px solid; margin-top:20px;opacity:0.9;background-color: black;"></div>

</body>

#apDiv1{
位置:绝对位置;
右:240px;
顶部:5px;
宽度:160px;
高度:39px;
z指数:1;
背景色:#ccc;
溢出:可见;
不透明度:0.8;
z指数:1;
}
var映射;
气候层;
云刺客;
var zoomLimit=6;
var标记=[{
销售:'1',
售后服务:“0”,
名称:“法兰克福罢工”,
纬度:'51.595212',
液化天然气:'-2.400068',
adr:“”,
个人电脑:“在某个地方”,
电话:21312312,
网址:‘.’,
avr:“”,
位置:“1”
},
{
销售额:'0',
售后服务:“1”,
姓名:“鲍勃二号”,
lat:'52.306323',
液化天然气:“14.000778”,
adr:'某个地址',
个人电脑:“某个地方”,
电话:213123123,
网址:‘.’,
avr:“”,
位置:“2”
},
{
销售:'1',
售后服务:“1”,
姓名:“鲍勃三号”,
纬度:'22.742384',
液化天然气:'-0.488795',
adr:'另一个地址',
个人电脑:“更多地方”,
电话:23423,
url:“”,
avr:“”,
位置:“3”
},
{
销售额:'0',
售后服务:“1”,
姓名:“鲍勃二号”,
lat:'11.306323',
液化天然气:“14.000778”,
adr:'某个地址',
个人电脑:“某个地方”,
电话:213123123,
网址:‘.’,
avr:“”,
位置:“4”
},
];
函数_newGoogleMapsMarker(参数){
var r=新的google.maps.Marker({
映射:参数映射,
图标:'icon2.gif',
位置:新google.maps.LatLng(参数,参数),
标题:参数头
});
if(参数数据){
google.maps.event.addListener(r,'click',function(){
//此->连接onclick事件的标记
如果(!this.getMap()。\u infoWindow){
this.getMap()。_infoWindow=new google.maps.infoWindow();
}
这个.getMap()。\u infoWindow.close();
this.getMap().\u infoWindow.setContent(参数数据);
this.getMap()。\u infoWindow.open(this.getMap(),this);
});
}
返回r;
}
函数init(){
变量mO={
中心:新google.maps.LatLng(52.041213,-1.325532),
缩放:3,
泛控制:错误,
动物控制:错误,
mapTypeControl:false,
scaleControl:false,
街景控制:错误,
overviewMapControl:错误,
旋转控制:错误,
动物控制:对,
导航控制选项:{
样式:google.maps.NavigationControlStyle.SMALL
},
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=新的google.maps.map(document.getElementById(“map”),mO);
对于(变量a=0;a
直到行
图标:“icon2.gif”
被更改,然后每个标记都将使用相同的图像。是的,我尝试将其插入var dealer_标记中,但没有成功看起来是正确的方法。假设您决定使用
param.url
,那么
url:'icon1.gif'
<代码>url:'icon2.gif'<代码>url:'icon3.gif',和
图标:param.url,
。当我尝试您的示例时,得到了默认的google图标,,,我的USL只是示例。图像文件需要存在。