<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>

style>body, html,#map {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}style>div id="map">div>script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥 const setRotation = (options) => { return new Promise((resolve, reject) => { let w = options.width || 40 let h = options.height ... 集成步骤： 一.在项目的modle的build.gradle中添加依赖如下： implementation 'com. google .android.gms:play-services-maps:12.0.1' // 地图 操作工具类，添加标记等 compile 'com. google .maps.android:android-maps-utils:0.5+' 二. 地图 展示 1.xml文件中 <fragment xmlns:android="http://schem Google 地图 API 现在与 Google AJAX API 载入器集成，后者创建了一个公共命名空间，以便载入和使用多个 Google AJAX API 。该框架可让您将可选 google .maps.* 命名空间用于当前在 Google 地图 API 中使用的所有类、方法和属性，使用此命名空间替换常规 G 前缀。不要担心，现有 G 命名空间仍能得到 plot_ google _map函数的作用是使用 Google Maps API 在当前图片的背景中绘制指定的 谷歌地图 。该函数假定当前图形的坐标以WGS84为基准，并使用转换代码将图像从 Google 使用的坐标系转换并投影到WGS84坐标中。 地图 的缩放尺度经过自动确定以覆盖图形的整个区域，此外，还可以在图中缩放时自动刷新 地图 ，在放大时显示更多细节。 谷歌地图 API 在没有 API 密钥的情况下每天最多只能提供... https://maps. google api s.com/maps/ api /js?key=YOUR_KEYcallback=initMap 国内访问地址 https://ditu. google .cn/maps/ api /js?key=YOUR_KEY 地图 初始化 调用 地图 显示接口： Map(mapDiv:Node, opts?:MapOptions ) var mapOption =...