谷歌地图常用API

<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, //禁用双击放大地图, gestureHandling: 'greedy' //取消iframe页面需要按住ctrl键才能缩放 }); //恢复默认鼠标指针 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>