Question

 var map;
        var markersArray = [];
        var myCoordsLenght = 10;



function initialize() {
            var markers = [];

            var myOptions = {
                zoom: 16,
               mapTypeId: google.maps.MapTypeId.ROADMAP,

            };

            map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);


            var defaultBounds = new google.maps.LatLngBounds( //default lat and long
                    new google.maps.LatLng(40.1889, 19.0548),
                    new google.maps.LatLng(34.7659, 28.7118));
            map.fitBounds(defaultBounds);





            google.maps.event.addListener(map, "click", function(event)  // click listener on map
            {
               placeMarker(event.latLng);                               // place inv marker

                // display the lat/lng in your form's lat/lng fields
            document.getElementById('latFld').value = event.latLng.lat().toFixed(myCoordsLenght);
                document.getElementById('lngFld').value = event.latLng.lng().toFixed(myCoordsLenght);
            });
            // Create the search box and link it to the UI element.
            var input = /** @type {HTMLInputElement} */(
                    document.getElementById('pac-input'));
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
            var searchBox = new google.maps.places.SearchBox(
                    /** @type {HTMLInputElement} */(input));

            // [START region_getplaces]
            // Listen for the event fired when the user selects an item from the
            // pick list. Retrieve the matching places for that item.
            google.maps.event.addListener(searchBox, 'places_changed', function() {
                var places = searchBox.getPlaces();
                // fixed zoom size
                var listener = google.maps.event.addListener(map, "idle", function() {
                    if (map.getZoom() > 16)
                        map.setZoom(16);
                    google.maps.event.removeListener(listener);
                });
                for (var i = 0, marker; marker = markers[i]; i++) {
                    marker.setMap(null);
                }
                markers = [];
                var bounds = new google.maps.LatLngBounds();
                for (var i = 0, place; place = places[i]; i++) {
                    bounds.extend(place.geometry.location);
                }
                map.fitBounds(bounds);
            });
            // [END region_getplaces]
            // Bias the SearchBox results towards places that are within the bounds of the
            // current map's viewport.
            google.maps.event.addListener(map, 'bounds_changed', function() {
                var bounds = map.getBounds();
                searchBox.setBounds(bounds);
            });



        }

        function placeMarker(location) {
        // first remove all markers if there are any
            deleteOverlays();
            var marker = new google.maps.Marker({
                position: location,
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP
            });
            // add marker in markers array
            markersArray.push(marker);
           //map.setCenter(location);
            // adds a listener to the marker
             // gets the coords when drag event ends
           // then updates the input with the new coords
             google.maps.event.addListener(marker, 'dragend', function(evt) {
                document.getElementById('latFld').value = evt.latLng.lat().toFixed(myCoordsLenght);
                document.getElementById('lngFld').value = evt.latLng.lng().toFixed(myCoordsLenght);
            })
        }
        // Deletes all markers in the array by removing references to them
        function deleteOverlays() {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
                markersArray.length = 0;
            }
        }


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

我想添加绘图工具以便选择区域，我还想跟踪标记区域内标记的位置..问题是我无法将此代码https://developers.google.com/maps/documentation/javascript/examples/drawing-tools添加到我的内部示例代码！感谢

Answer 1

在初始化之后，只需在实例化地图后实例化绘图管理器，就像在示例中一样：

var 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'
},
circleOptions: {
  fillColor: '#ffff00',
  fillOpacity: 1,
  strokeWeight: 5,
  clickable: false,
  editable: true,
  zIndex: 1
}
}); 
drawingManager.setMap(map);

谷歌地图v3上的绘图工具

1 个答案: