谷歌api标记+点击

时间:2011-12-29 01:30:10

标签: google-maps

我正在尝试为我的google api添加自定义标记:工作正常,除非我点击该标记,我再也没有事件了:

var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(0, 0), 5);
map.addControl(new GLargeMapControl3D());
map.addControl(new GMenuMapTypeControl());

var myIcon = new GIcon(G_DEFAULT_ICON);
myIcon.image = "http://farm3.staticflickr.com/2140/1911601567_49d97f3318.jpg";
myIcon.iconSize = new GSize(80, 60);
markerOptions={};
//markerOptions = { icon:myIcon }; // if I uncomment this : no click anymore

var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();

var point = new GLatLng(southWest.lat() + latSpan * Math.random(),  southWest.lng() + lngSpan * Math.random());
var marker = new GMarker(point, markerOptions);
    marker.html = 'hello world';
    map.addOverlay(marker);
    GEvent.addListener(marker, "click", function() {
      marker.openInfoWindowHtml(marker.html);
  })

如果我取消注释//markerOptions = { icon:myIcon };

我显示了我的照片,但我无法再点击标记了。

有人可以帮帮我吗?您可以在http://www.roulette-chat.fr/google.php上看到它。

此致

1 个答案:

答案 0 :(得分:1)

我会说使用api v3代替。您正在使用的是不推荐使用的。您可以使用下面的内容,将您自己的图像作为标记。要将标记设置为可点击,您需要使用属性clickable:true

<script type="text/javascript">
      (function() {
        window.onload = function(){
            // Creating a LatLng object containing the coordinate for the center of the map  
          var latlng = new google.maps.LatLng(56.83, 15.16);  
          // Creating an object literal containing the properties we want to pass to the map  
          var options = {  
            zoom: 7,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };  
          // Calling the constructor, thereby initializing the map  
          var map = new google.maps.Map(document.getElementById('map'), options);  

          var marker = new google.maps.Marker({
            position: new google.maps.LatLng(56.8848, 14.7730), 
            map: map,
            title: 'My workplace',
            clickable: true,
            icon: 'url of your image'  //this is a custom marker Image
          });
        }
      })();
        </script>

要添加操作,您必须添加eventListener,如下所示:

google.maps.event.addListener(marker, 'click', function() {
  //do some action
});