google map 自定义右键菜单

最新推荐文章于 2019-05-14 09:53:30 发布

田猿笔记

最新推荐文章于 2019-05-14 09:53:30 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

文章标签： google function javascript div class xhtml

本文链接：https://blog.youkuaiyun.com/canduecho/article/details/2932809

本文介绍如何在Google地图API v2中实现自定义右键菜单，包括菜单项的创建、位置设置及响应事件。通过JavaScript代码展示了如何添加如缩放、定位等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

google map 自定义右键菜单,GControlPosition定义菜单的位置.

map.enableDoubleClickZoom();//开启双击google map会自动放大.
map.enableScrollWheelZoom();//开启滚动鼠标自动放大和缩小.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <title>Untitled Page</title>
    <script src="http://maps.google.com/maps?file=api&v=2&
key=ABQIA" type="text/javascript"></script>
    <script type="text/javascript">
var map = null;
    var geocoder = null;
    var contextmenu;
    function load(loc) {
      if (GBrowserIsCompatible()) {
        var point;
        map=new GMap2(document.getElementById("map"));

        map.addControl(new GOverviewMapControl());
        map.enableDoubleClickZoom();
        map.enableScrollWheelZoom();
        map.addControl(new GMapTypeControl());
        map.addControl(new GLargeMapControl());
        createContextMenu(map);
        var address='<font size="2" face="Arial"><b>INDIA</b><br/><br/>XYZ Inc.<br/>New York City <br/>America<br/>Ph.: 343254543</font>';
        point = new GLatLng(22.592057,88.421815);

        var marker = new GMarker(point);
        map.setCenter(point,17);
        map.addOverlay(marker);
        map.setMapType(G_HYBRID_MAP);
        GEvent.addListener(marker,
          "click", function() {marker.openInfoWindowHtml(address);});
        marker.openInfoWindowHtml(address);

      }
    }

function createContextMenu(map)
   {
      contextmenu = document.createElement("div");
      contextmenu.style.visibility="hidden";
      contextmenu.style.background="#ffffff";
      contextmenu.style.border="1px solid #8888FF";

contextmenu.innerHTML ="<a href='javascript:zoomIn()'><div class='context'> Zoom in </div></a>"
+ "<a href='javascript:zoomOut()'><div class='context'> Zoom out </div></a>"
+ "<a href='javascript:zoomInHere()'><div class='context'> Zoom in here </div></a>"
+ "<a href='javascript:zoomOutHere()'><div class='context'> Zoom out here </div></a>"
+ "<a href='javascript:centreMapHere()'><div class='context'> Centre map here </div></a>";

      map.getContainer().appendChild(contextmenu);
      GEvent.addListener(map,"singlerightclick",function(pixel,tile)
      {
          clickedPixel = pixel;
          var x=pixel.x;
          var y=pixel.y;
          if (x > map.getSize().width - 120)
          {
            x = map.getSize().width - 120
          }
          if (y > map.getSize().height - 100)
          {
            y = map.getSize().height - 100
          }
          var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(x,y));
          pos.apply(contextmenu);
          contextmenu.style.visibility = "visible";
     });
     GEvent.addListener(map, "click", function()
     {
          contextmenu.style.visibility="hidden";
     });
}
function zoomIn()
{
            map.zoomIn();
            contextmenu.style.visibility="hidden";
}
function zoomOut()
{
           map.zoomOut();
           contextmenu.style.visibility="hidden";
}
function zoomInHere()
{
           var point = map.fromContainerPixelToLatLng(clickedPixel)
           map.zoomIn(point,true);
           contextmenu.style.visibility="hidden";
}
function zoomOutHere()
{
          var point = map.fromContainerPixelToLatLng(clickedPixel)
          map.setCenter(point,map.getZoom()-1);
          contextmenu.style.visibility="hidden";
}
function centreMapHere()
{
         var point = map.fromContainerPixelToLatLng(clickedPixel)
         map.setCenter(point);
         contextmenu.style.visibility="hidden";
}

    </script>
</head>
<body onload="load('map')" onunload="GUnload()" style="
                background-color:Transparent">
    <div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>