谷歌地图常用API

来源:互联网 发布:udp端口 编辑:程序博客网 时间:2024/05/21 09:39
<style>body, html,#map {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}</style><div id="map"></div><script src="https://maps.googleapis.com/maps/api/js?key=您的密钥&callback=initMap"></script><script>    function initMap(){        map = new google.maps.Map(document.getElementById('map'), { //创建地图到ID元素容器,并设置初始化配置            center: { //设置中心点坐标                lat: -34.397,                lng: 150.644            },            zoom: 8 //设置地图级别        });        map.setOptions({             draggableCursor: "url('ruler.cur') 3 6, crosshair", //设置鼠标指针样式            draggingCursor: "url('ruler.cur') 3 6, crosshair", //设置拖动时鼠标指针样式            scrollwheel: false, //禁用滚轮缩放            mapTypeControl: false, //禁用地图类型切换控件            zoomControl: false, //禁用地图缩放控件            scaleControl: false, //禁用地图比例            draggable: false, //禁用拖动            disableDoubleClickZoom: true, //禁用双击放大地图        });        //恢复默认鼠标指针        map.setOptions({             draggableCursor: undefined,            draggingCursor: undefined        });        //获取四个角的坐标        var maxX = map.getBounds().getNorthEast().lng();           var maxY = map.getBounds().getNorthEast().lat();         var minX = map.getBounds().getSouthWest().lng();           var minY = map.getBounds().getSouthWest().lat();        //获取中心点的坐标        map.getBounds().getCenter().lng();         map.getBounds().getCenter().lat();//或下面的获取方式        map.getCenter().lng();         map.getCenter().lat();         //获取点击坐标        google.maps.event.addListener(map,"click",function(event){            console.log(event.latLng.lat() + ',' + event.latLng.lng());        });        //点击创建标记        google.maps.event.addListener(map,"click",function(event){            var myIcon = { //自定义点图标                url: 'mapCircle.png', //图标路径                size: new google.maps.Size(10, 10), //图标尺寸                origin: new google.maps.Point(0, 0), //图标原点                anchor: new google.maps.Point(0,0) //图标偏移量            };            //var mySvgIcon = {url: 'icon.svg', size: new google.maps.Size(48, 48)}; //自定义svg格式图标(svg文件内必须设置宽度和高度,而且与google.maps.Size()设置的大小必须保持一致)            //var mySvgIcon = {url: 'data:image/svg+xml;utf-8,<svg width="48" height="48"...', size: new google.maps.Size(48, 48)}; //url也可以是svg的data数据形式            var point = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()); //创建坐标点            var marker = new google.maps.Marker({ position: point, icon: myIcon }); //创建标记            marker.setMap(map); //把标记添加到地图        });        //创建折线        var latLng_Arr = []; //创建点数组        google.maps.event.addListener(map,"click",function(event){            latLng_Arr.push({ //获取当前点追加到数组                lat: event.latLng.lat(),                lng: event.latLng.lng()            });            if(latLng_Arr.length >= 2){ //如果有两个点再连线                var polyline = new google.maps.Polyline({                    strokeColor: "#fd8044", //颜色                    strokeWeight: 2, //宽度                    strokeOpacity: .9, //不透明度                    path: latLng_Arr                });                polyline.setMap(map); //把折线添加到地图            }        });        //创建文本标记        google.maps.event.addListener(map,"click",function(event){            var point = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()); //创建坐标点            var marker = new google.maps.Marker({position: point}); //创建标记            if(typeof InfoBox != 'undefined'){ //如果InfoBox构造函数已存在                createLabe(); //直接创建            }else{ //如果InfoBox构造函数不存在                getScript('infobox.js',createLabe); //异步加载infobox.js文件完成后再创建                //插件地址: https://github.com/googlemaps/v3-utility-library/tree/master/infobox            }        });        function createLabe(){ //创建label            var label = new InfoBox({                content: '标记文字',                disableAutoPan: false,                maxWidth: 0,                pixelOffset: new google.maps.Size(0, 0),//偏移                zIndex: 1,                closeBoxURL: "",                isHidden: false,                pane: "floatPane",                enableEventPropagation: false,                boxStyle: {                    color: "#666",                    fontSize: "12px",                    height: "20px",                    padding: "0 5px",                    lineHeight: "20px",                    fontFamily: "微软雅黑",                    borderColor: "#999",                    borderRadius: "2px",                    border: "1px solid #999",                    backgroundColor: "#fff"                }            }            label.open(map,marker); //把标签添加到地图        }        //异步加载js方法        function getScript(url,fn){            var url_json = {};            if(typeof url == 'object' && url.constructor == Array){                for(var i= 0; i< url.length; i++){                    if(!url_json[url[i]]){                        url_json[url[i]] = url[i];                    }                }            }else if(typeof url == 'string'){                url_json[url] = url;            }            function getJsonLength(json){                var length = 0;                for(var i in json){                    length++;                }                return length;            }            var script_json = {};            var load_num = 0;            for(var i in url_json){                script_json[i] = document.createElement('script');                script_json[i].src = url_json[i];                document.body.appendChild(script_json[i]);                script_json[i].onload = function(){                    load_num++;                    if(load_num == getJsonLength(url_json)){                        typeof fn == 'function' ? fn() : null;                    }                };            }        }    }</script>
0 0
原创粉丝点击