Google Map 在地图上画图

本例需要能访问谷歌地图。

map, draw

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 5284
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var map;
var drawingManager;

var drawMode = false;

function initialize() {
    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(25.774252, -80.190262)
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

// Define the LatLng coordinates for the polygon's path.
    var triangleCoords = [
        new google.maps.LatLng(25.774252, -80.190262),
        new google.maps.LatLng(18.466465, -66.118292),
        new google.maps.LatLng(32.321384, -64.75737),
        new google.maps.LatLng(25.774252, -80.190262)
    ];

// Construct the polygon.
    bermudaTriangle = new google.maps.Polygon({
        paths: triangleCoords,
        strokeColor: '#da80c7',
        strokeOpacity: 1,
        strokeWeight: 2,
        fillColor: '#000',
        fillOpacity: 0.35,
        editable: true
    });

bermudaTriangle.setMap(map);

drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.MARKER,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
                google.maps.drawing.OverlayType.MARKER,
                google.maps.drawing.OverlayType.CIRCLE,
                google.maps.drawing.OverlayType.POLYGON,
                google.maps.drawing.OverlayType.POLYLINE,
                google.maps.drawing.OverlayType.RECTANGLE
            ]
        },
        markerOptions: {
            icon: 'images/beachflag.png',
            editable: true,
        },
        polygonOptions: {
            editable: true,
        },
        circleOptions: {
            fillColor: '#ffff00',
            fillOpacity: 1,
            strokeWeight: 5,
            clickable: false,
            editable: true,
            zIndex: 1
        }
    });
    drawingManager.setMap(map);

google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
        console.log("Completed");
    });

}

google.maps.event.addDomListener(window, 'load', initialize);

编译

CSS

HTML

本例需要能访问谷歌地图。

map, draw

编辑器支持Emmet

快捷键

本例需要能访问谷歌地图。

map, draw

Mapbox.js + Leaflet.label.js 地图及标签覆盖层

HTML5 GSAP 在手机上展示地图位置的动画效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：