Javascript 通过选择更改标记图标API google maps v3

Javascript 通过选择更改标记图标API google maps v3,javascript,html,google-maps-api-3,Javascript,Html,Google Maps Api 3,我有这个问题,, 我在html中做了一些选择选项,每个选项的值中都有一个图标图像的名称: <select onchange="function()"> // i haven't got the function yet <option value="green.png">green</option> <option value="orange.png">orange</option> <option v

我有这个问题,, 我在html中做了一些选择选项,每个选项的值中都有一个图标图像的名称:

<select onchange="function()"> // i haven't got the function yet
    <option value="green.png">green</option> 
    <option value="orange.png">orange</option> 
    <option value="teal.png">teal</option> 
</select>
//我还没有得到函数
绿色
橙色
水鸭
以及当前的javascript代码:

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

 <!-- Control Bar -->
 <script type="text/javascript" src="ZoomPanControl.js"></script>
 <!-- Control Bar -->

     <script type="text/javascript">
    var geocoder;
    var map;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-32.818044,-61.395249);
    // Map Options
  var mapOptions = {
    zoom: 15,
    center: latlng,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
    // Map
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  var ZoomPanControl = new missouristate.web.ZoomPanControl(map);
        ZoomPanControl.index = -1;
        map.controls[google.maps.ControlPosition.LEFT_TOP].push(ZoomPanControl);
}
    // Directions
function codeAddress() {
var cañada = 'Cañada de Gomez, Argentina';
var altura = document.getElementById('altura').value;
  var address = document.getElementById('address').value + altura + cañada  ;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
    // MARKER
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Error: ' + status);
    }
  });
}

// Listener 
google.maps.event.addDomListener(window, 'load', initialize);

    </script>

var地理编码器;
var映射;
函数初始化(){
geocoder=新的google.maps.geocoder();
var latlng=new google.maps.latlng(-32.818044,-61.395249);
//地图选项
变量映射选项={
缩放:15,
中心:拉特林,
disableDefaultUI:true,
mapTypeId:google.maps.mapTypeId.ROADMAP
}
//地图
map=new google.maps.map(document.getElementById('map_canvas'),mapOptions);
var ZoomPanControl=新密苏里州.web.ZoomPanControl(地图);
ZoomPanControl.index=-1;
控件[google.maps.ControlPosition.LEFT_TOP].push(ZoomPanControl);
}
//方向
函数代码地址(){
var cañada=‘阿根廷戈麦斯的cañada’;
var altura=document.getElementById('altura').value;
var address=document.getElementById('address')。value+altura+cañada;
geocoder.geocode({'address':address},函数(结果,状态){
if(status==google.maps.GeocoderStatus.OK){
map.setCenter(结果[0].geometry.location);
//标记
var marker=new google.maps.marker({
地图:地图,
位置:结果[0]。几何体。位置
});
}否则{
警报(“错误:”+状态);
}
});
}
//听众
google.maps.event.addDomListener(窗口“加载”,初始化);
当用户在选择菜单中选择一个或另一个选项时,我需要更改上次创建的标记(仅最后一个)的图标。我不知道我是否需要一个监听器,或者我只需要“onchange”事件就可以做到

我怎么做

  • 使标记全球化
  • 在“更改图标”功能中对其调用setIcon

    var marker = null;
    function codeAddress() {
      var cañada = 'Cañada de Gomez, Argentina';
      var altura = document.getElementById('altura').value;
      var address = document.getElementById('address').value + altura + cañada  ;
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          // MARKER
          marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
          });
        } else {
          alert('Error: ' + status);
        }
      });
    }
    
    <select onchange="marker.setIcon(this.value)">
      <option value="http://maps.google.com/mapfiles/ms/micons/green-dot.png">green</option> 
      <option value="http://maps.google.com/mapfiles/ms/micons/orange-dot.png">orange</option> 
      <option value="http://maps.google.com/mapfiles/ms/micons/yellow-dot.png">yellow</option> 
    </select>
    
    var标记=null;
    函数代码地址(){
    var cañada=‘阿根廷戈麦斯的cañada’;
    var altura=document.getElementById('altura').value;
    var address=document.getElementById('address')。value+altura+cañada;
    geocoder.geocode({'address':address},函数(结果,状态){
    if(status==google.maps.GeocoderStatus.OK){
    map.setCenter(结果[0].geometry.location);
    //标记
    marker=新的google.maps.marker({
    地图:地图,
    位置:结果[0]。几何体。位置
    });
    }否则{
    警报(“错误:”+状态);
    }
    });
    }
    绿色
    橙色
    黄的
    
  • 使标记全球化
  • 在“更改图标”功能中对其调用setIcon

    var marker = null;
    function codeAddress() {
      var cañada = 'Cañada de Gomez, Argentina';
      var altura = document.getElementById('altura').value;
      var address = document.getElementById('address').value + altura + cañada  ;
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          // MARKER
          marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
          });
        } else {
          alert('Error: ' + status);
        }
      });
    }
    
    <select onchange="marker.setIcon(this.value)">
      <option value="http://maps.google.com/mapfiles/ms/micons/green-dot.png">green</option> 
      <option value="http://maps.google.com/mapfiles/ms/micons/orange-dot.png">orange</option> 
      <option value="http://maps.google.com/mapfiles/ms/micons/yellow-dot.png">yellow</option> 
    </select>
    
    var标记=null;
    函数代码地址(){
    var cañada=‘阿根廷戈麦斯的cañada’;
    var altura=document.getElementById('altura').value;
    var address=document.getElementById('address')。value+altura+cañada;
    geocoder.geocode({'address':address},函数(结果,状态){
    if(status==google.maps.GeocoderStatus.OK){
    map.setCenter(结果[0].geometry.location);
    //标记
    marker=新的google.maps.marker({
    地图:地图,
    位置:结果[0]。几何体。位置
    });
    }否则{
    警报(“错误:”+状态);
    }
    });
    }
    绿色
    橙色
    黄的