Google Map 实例

最新推荐文章于 2017-06-07 15:24:59 发布

原创最新推荐文章于 2017-06-07 15:24:59 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#google #math #function #stylesheet #null #button

这篇博客展示了如何利用Google Map API创建交互式地图，包括添加可移动和不可移动的标记，设置地图的中心坐标，以及实现地图的拖动和缩放功能。通过JavaScript函数实现了标记的动态添加和更新，以及地图的实时调整，提供了刷新地图的功能。

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

<html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="content-type">
        <link href="style.css" type="text/css" rel="stylesheet">
        <script src="http://ditu.google.com/maps?file=api&v=2&key=abcdefgh "
        type="text/javascript"></script>
        <style type="text/css"></style>
        <script type="text/javascript">
            /**
            *@param markArr 已经存在的标记的数据数组[内容,经度,纬度]
            */
            //function initMap(,markArr){
            //}

            var map = null;
            var point = null;
            var mmarker = null;
            var arr = new Array();
            //var arr = new Array("32.040676557717454","118.7838363647461");

            //添加可以移动标记
            function addIconImage(){
                mmarker = new GMarker(point, {draggable: true, bouncy: true});
                map.addOverlay(mmarker);
            }
            //添加不可以移动标记
            function addIconImages(){
                for(i=0;i<arr.length;i=i+2){
                    map.newMarker = new GMarker(new GLatLng(arr[i],arr[i+1]), {draggable: false, bouncy: true});
                    map.addOverlay(map.newMarker);
                }
            }
            function load(){
                if (GBrowserIsCompatible()) {//检查浏览器的兼容性
                    map = new GMap2(document.getElementById("map")); //map对象
                    map.addControl(new GLargeMapControl());       // 缩放平移按钮及滑块控件
                    map.addControl(new GScaleControl());       // 地图比例尺控件
                    map.enableDragging();              // 设置地图可以被拖动
                    map.enableContinuousZoom();       //设置地图可以连续平滑地缩放。
                    map.enableScrollWheelZoom();      //设置地图可以由鼠标滚轮控制缩放。
                    //判断是否有标记
                    if(arr.length < 2){
                        //如果没有标记
                        point = new GLatLng(32.040676557717454,118.7838363647461);     //初始坐标
                        map.setCenter(point,12); // 设置地图的中心坐标
                    }else if(arr.length == 2){
                        //如果有一个标记
                        point = new GLatLng(arr[0],arr[1]);     //初始坐标
                        map.setCenter(point,12); // 设置地图的中心坐标
                        addIconImage(); //添加可移动标记
                    }else{
                        getCurrents();   //多标记的时候，计算中心
                        addIconImages(); //添加不可移动标记
                    }
                    //初始化当前地图中心坐标
                    document.getElementById("show_x").innerHTML = point.x;
                    document.getElementById("show_y").innerHTML = point.y;
                    addDraggingListener();   //添加监听器
                }
            }
            //多标记的时候，计算中心
            function getCurrents(){
                var arrx = Array();
                var arry = Array();
                for(i=0;i<arr.length;i=i+2){
                    arrx[i/2] = arr[i];
                    arry[i/2] = arr[i+1];
                }
                //多坐标中心
                var censx = (Math.min.apply( Math, arrx )+Math.max.apply( Math, arrx ))/2;
                var censy = (Math.min.apply( Math, arry )+Math.max.apply( Math, arry ))/2;
                point = new GLatLng(censx,censy);     //初始坐标
                map.setCenter(point,12); // 设置地图的中心坐标
                var bounds = map.getBounds();   //取得地图边界值
                //调整显示范围
                while(Math.min.apply( Math, arrx ) < bounds.getSouthWest().lat() //标记的北纬最小值<边界的北纬最小值    最小值：靠近赤道
                   || Math.max.apply( Math, arrx ) > bounds.getNorthEast().lat() //标记的北纬最大值>边界的北纬最大值    最大值：靠近北极
                   || Math.min.apply( Math, arry ) < bounds.getSouthWest().lng()
                   || Math.max.apply( Math, arry ) > bounds.getNorthEast().lng()
                ){
                    map.zoomOut();              //缩放地图
                    bounds = map.getBounds();   //取得地图边界值
                }
            }
            //取得标记坐标，并使居中
            function getCurrentPoints(){
                var markerCenter = mmarker.getPoint(); //取得标记坐标
                document.getElementById("show_x").innerHTML = markerCenter.lat();
                document.getElementById("show_y").innerHTML = markerCenter.lng();
                map.panTo(markerCenter);               //使标记居中
            }
            //添加侦听器
            function addDraggingListener(){
                //为标记添加dragend事件侦听器.
                GEvent.addListener(mmarker, 'dragend', getCurrentPoints);
            }
        </script>
    </head>

    <body onload="load();" onunload="GUnload();">
    <div id="map" style="width: 700px; height: 450px"></div>
    <br />
    <P>经度: <latter id="show_x"></latter></P>
    <P ></P>
    <P>纬度: <latter id="show_y"></latter></P>

    <OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" id="map"
    height="0" width="0"> </OBJECT>
    <input type="button" name="cancelButton" value="刷新"
    onclick=window.location.reload();>
    </body>
</html>