首页 > 代码库 > GoogleMapsV3-----基础地图(自定义消息提示OverlayView) (转)

GoogleMapsV3-----基础地图(自定义消息提示OverlayView) (转)

2024-07-14 13:59:06   221人阅读

<html>

<head>

<title>

</title>

    <title></title>
    <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&region=cn"> </script>
    <script type="text/javascript">
        var map = null;
        var myLableMessage = 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);
        }
        //【自定义OverlayView】
        //===========================================================================================================================
            function myLable(latlng, text, map) {
                this.latlng_ = latlng;
                this.text_ = text;
                this.map_ = map;
                this.div_ = null;
                this.setMap(map);
            }

            myLable.prototype = new google.maps.OverlayView(); //您应当继承此类，方法是将叠加层的 prototype 设置为 new OverlayView.prototype

            //必须实现三个方法，即 onAdd()、draw() 和 onRemove()。在 draw() 方法中，应放置这些元素。
            //在 add() 方法中，您应当创建 DOM 对象，并将其作为窗格的子对象附加。调用有效地图对象的.setMap()
            myLable.prototype.onAdd = function () {

                var div = document.createElement(‘DIV‘);
                div.style.border = "none";
                div.style.borderWidth = "0px";
                div.style.position = "absolute";
                div.innerHTML = this.text_;
                this.div_ = div;
                var panes = this.getPanes();
                panes.floatPane.appendChild(div); ;

            }
            //每当地图属性更改时都会调用 draw() 方法，该方法可以更改元素的位置，如缩放、中心或地图类型。
            myLable.prototype.draw = function () {

                var overlayProjection = this.getProjection();

                var position = overlayProjection.fromLatLngToDivPixel(this.latlng_);

                var div = this.div_;
                div.style.left = position.x + ‘px‘;
                div.style.top = position.y + ‘px‘;
                div.style.width = ‘100px‘;
                div.style.background = "#ffffff";
                div.style.border = "1px solid #85a5b4";
            }

            //在 onRemove() 方法中，应将对象从 DOM 中删除。清除时调用有效地图对象的.setMap(null)
            myLable.prototype.onRemove = function () {
                this.div_.parentNode.removeChild(this.div_);
                this.div_ = null;
            }
            //===========================================================================================
            function LableMessage() {
                var lat = document.getElementById("lat_text").value;
                var lng = document.getElementById("lng_text").value;
                var text = document.getElementById("content_text").value;
                var latlng = new google.maps.LatLng(parseFloat(lng), parseFloat(lat));
                //如果myLableMessage不为null，则清除原来的
                if (myLableMessage != null) { myLableMessage.setMap(null); myLableMessage = null; }
                //调用自定义OverlayView
                myLableMessage = new myLable(latlng, text, map);
            }

            function ClearLableMessage() {
                if (myLableMessage != null) { myLableMessage.setMap(null); myLableMessage = null; }
            }
 </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;">


联系
我们