GoogleMapsV3-----基础地图(右键菜单)

最新推荐文章于 2018-07-20 17:01:34 发布

solicitous

最新推荐文章于 2018-07-20 17:01:34 发布

阅读量576

点赞数

分类专栏： googleMapV3 文章标签：右键菜单

本文链接：https://blog.csdn.net/solicitous/article/details/8536663

版权

googleMapV3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<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;' οnclick='javascript:document.getElementById(\"zidingyicaidan\").innerHTML = \"自定义菜单1\"'>自定义菜单1 </div><hr/>"                                    + "<div style='vertical-align:middle;cursor:pointer;'οnclick='javascript:document.getElementById(\"zidingyicaidan\").innerHTML = \"自定义菜单2\"'>自定义菜单2 </div><hr/>"                                    + "<div style='vertical-align:middle;cursor:pointer;'οnclick='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 οnlοad="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>