使用select更改标记图标API谷歌地图v3 [英] Change Marker icon API google maps v3 with a select

问题描述

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

I have this problem, I made some select options in html and each one has the name of an icon image in the value:

<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代码：

And the current javascript code:

 <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>

当用户需要更改最后创建的标记（最后一个）的图标时选择一个或另一个选项。我不知道是否需要侦听器，或者我可以只使用onchange事件。

And I need to change the icon of the last created marker (just the last one) when the user selects one or another option in the select. I don't know if I need a listener or I can do it with just the "onchange" event.

我该怎么做？

推荐答案

1. 使标记全局



2. 更改图标功能
   
   

1. Make the marker global

2. call setIcon on it in your change the icon function

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>

工作示例

这篇关于使用select更改标记图标API谷歌地图v3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！