在Google Map V3上打开一个新的菜单框

时间:2012-08-09 19:04:22

标签: jquery google-maps events mouseevent

当我右键点击谷歌地图时,我想显示一个菜单框,正好是我的鼠标在地图上的位置。我知道我可以使用谷歌地图活动,但我不知道该怎么做。我比javascript更熟悉jQuery。感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

此示例将对您有所帮助,并且还会查看定义rightclick事件的代码的结尾:

HTML:

<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://dl.dropbox.com/u/15208254/stackoverflow/googlelocation/script.js" type="text/javascript"></script>
<div id="mapDiv" style="width:700px; height: 500px;"></div>

JS:

$.geolocation.find(function(location) {
        var lat = location.latitude;
        var lng = location.longitude;

        var map = new google.maps.Map($('#mapDiv').get(0), {
            center: new google.maps.LatLng(lat, lng),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var pinColor = "FE7569";
        var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));
        var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
        new google.maps.Size(40, 37),
        new google.maps.Point(0, 0),
        new google.maps.Point(12, 35))

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),
            map: map,
            icon: pinImage,
            shadow: pinShadow 
        });

    /* click event for the map */
    google.maps.event.addListener(map, 'rightclick', function() {
        alert('right click detected!');
    });
});

现场演示:

http://jsfiddle.net/oscarj24/sPsxh/1/