GoogleMapsV3-----基础地图(右键菜单)
2013-01-24 09:25
274 查看
<html><head><style type="text/css"> html { height: 100%; } body { height: 100%; margin: 0px; padding: 0px; } #map_canvas { height: 80%; } </style> <script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3.9&sensor=false®ion=cn"> </script> <script type="text/javascript"> var map = null; //【初始化地图】 //=========================================================================================== function initialize() { //构建经纬度点 var latlng = new google.maps.LatLng(30.277925, 120.177597); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.HYBRID }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //【菜单】 //--------------------------------------------------------------------------------------- var iconExampleDiv = document.createElement('DIV'); var iconExampleControl = new createIconExample(iconExampleDiv, map); iconExampleDiv.index = 1; map.controls[google.maps.ControlPosition.TOP_LEFT].push(iconExampleDiv); function createIconExample(controlUI, map) { contextmenu = document.createElement("div"); contextmenu.style.width = "100px"; contextmenu.style.display = "none"; contextmenu.style.background = "#ffffff"; contextmenu.style.border = "1px solid #cccccc"; contextmenu.style.padding = "5px 5px 5px 5px"; contextmenu.innerHTML = "<div style='vertical-align:middle;cursor:pointer;' onclick='javascript:document.getElementById(\"zidingyicaidan\").innerHTML = \"自定义菜单1\"'>自定义菜单1 </div><hr/>" + "<div style='vertical-align:middle;cursor:pointer;'onclick='javascript:document.getElementById(\"zidingyicaidan\").innerHTML = \"自定义菜单2\"'>自定义菜单2 </div><hr/>" + "<div style='vertical-align:middle;cursor:pointer;'onclick='javascript:document.getElementById(\"zidingyicaidan\").innerHTML = \"自定义菜单3\"'>自定义菜单3 </div><hr/>"; controlUI.appendChild(contextmenu); google.maps.event.addDomListener(map, 'rightclick', function (event) { contextmenu.style.position = "relative"; contextmenu.style.left = event.pixel.x - 80 + "px"; //平移显示以对应右键点击坐标 contextmenu.style.top = event.pixel.y + "px"; contextmenu.style.display = "block"; }); //点击菜单的时候隐藏菜单 google.maps.event.addDomListener(controlUI, 'click', function () { contextmenu.style.display = "none"; }); //点击地图的时候隐藏菜单 google.maps.event.addDomListener(map, 'click', function () { contextmenu.style.display = "none"; }); //拖动地图的时候隐藏菜单 google.maps.event.addDomListener(map, 'drag', function () { contextmenu.style.display = "none"; }); } //--------------------------------------------------------------------------------------- } //=========================================================================================== </script></head><body onload="initialize()"> <div id="map_canvas" style="width: 80%; height: 100%; float: left;"> </div> <div id="Div1" style="width: 20%; height: 100%; overflow: scroll;"> <hr /> <p style="text-align: center;"> <span id="zidingyicaidan"></span> </p> </div></body></html>
相关文章推荐
- OpenLayers 3 之 添加地图鼠标右键菜单
- GoogleMapsV3-----基础地图(新建带标记带窗口可移动的圆,矩形,多边形)
- 程矢Axure夜话:Axure基础系列视频教程之上下文右键菜单
- 关于openlayers3多边形区域绘制以及地图/区域鼠标右键菜单功能
- OpenLayers 3之添加地图鼠标右键菜单
- js基础运用-右键菜单
- GoogleMapsV3-----基础地图(自定义消息提示OverlayView) (转)
- win7基础 cmd 桌面空白处,按住shift后,通过右键菜单启动cmd窗口
- 使用OpenLayers3 添加地图鼠标右键菜单
- 创建RichTextBox的右键菜单(比较基础的东西了)
- C#之winform基础 为listbox添加右键菜单
- Mac 基础教程:如何删除右键菜单重复项目
- javascriptAPI 地图窗口特定位置右键显示菜单功能
- 使用OpenLayers3 添加地图鼠标右键菜单
- 基础知识之最大化,最小化,系统托盘图标,右键菜单,提示气球,关闭
- javascriptAPI 地图窗口任意位置右键显示菜单功能
- 创建RichTextBox的右键菜单(比较基础的东西了)
- C#Winform基础 为datagridview添加右键菜单
- openlayers3+中添加地图右键和要素右键菜单
- GoogleMapsV3-----基础地图(鼠标移动画矩形)