将地理编码标记添加到Google Maps V3中现有的标记数组中

时间:2012-01-02 18:33:44

标签: google-maps

我的地图上有50个标记(谷歌地图API的V3),名为斑点。我想添加一个文本字段,以便用户可以输入他们的邮政编码,它会添加一个额外的标记,为他们提供与周围标记相关的位置。我认为我与下面的内容非常接近,但它赢了;在地图上输出标记。我认为存在冲突,因为我已经有一系列标记,并且我不喜欢通过该函数添加额外的标记。如何通过codeAddress()函数获取该函数以向数组添加其他元素?或者甚至是正确的方法呢?

<script type="text/javascript">
var geocoder;
var map;
function initialize() {

  geocoder = new google.maps.Geocoder();
  var myOptions = {
    zoom: 14,
    center: new google.maps.LatLng(51.51251523, -0.133201961),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  setMarkers(map, spots);
}


var spots = [

['River Street  - Clerkenwell', 51.52916347, -0.109970527, '3.png', 2896, 'River Street  - Clerkenwell'],
['Phillimore Gardens - Kensington', 51.49960695, -0.197574246, '3.png', 2897, 'Phillimore Gardens - Kensington']

];

function setMarkers(map, locations) {

      var image1 = new google.maps.MarkerImage('amber-spot.png',
      new google.maps.Size(30, 36),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));

  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };

  for (var i = 0; i < locations.length; i++) {
    var spot = locations[i];
    var myLatLng = new google.maps.LatLng(spot[1], spot[2]);

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: spot[3],
        title: spot[0],
        zIndex: spot[4],
        html: spot[5]
    });
    var infowindow = new google.maps.InfoWindow({
});

    google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(this.html);
    infowindow.open(map,this);
});
  }
}

  function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker2 = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
</script>

这是地理编码的表格

<div class="view-content">
<input id="address" type="textbox" value="W1T 4JD">
<input type="button" value="Geocode" onclick="codeAddress()">
<div id="map_canvas" style="width:800px; height:600px;"></div>

1 个答案:

答案 0 :(得分:0)

我最终使用Drupal gmap模块上的邻近邮政编码过滤器来执行此操作。最初我没有想到它会起作用,因为我没有在使用过滤器的View上使用gmap模块原生地图,但我没有意识到结果仍然在返回的数组中:-)。