Google 映射传递样式并禁用移动设备上的滚动

Question

我正在根据地址创建一些 google 地图，但我在传递一些样式和禁用移动设备上的滚动时遇到问题。

这是我目前拥有的

  //<![CDATA[

    if (GBrowserIsCompatible()) {

        // A function to create the marker and set up the event window
        // Dont try to unroll this function. It has to be here for the function closure
        // Each instance of the function preserves the contends of a different instance
        // of the "marker" and "html" variables which will be needed later when the event triggers.
        function createMarker(point, html) {
            var marker = new GMarker(point);

            return marker;
        }

        // Display the map, with some controls and set the initial location
        var map = new GMap2(document.getElementById("map-canvas"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(-15.4165216,28.2794958,17), 15);

        // Set up three markers with info windows

        var point = new GLatLng(-15.4165216,28.2794958,17);
        var marker = createMarker(point, '');
        map.addOverlay(marker);


    }

        // display a warning if the browser was not compatible
    else {
        alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    //]]>

和造型

// Create an array of styles.
            var styles = [
            {
              "featureType": "landscape",
              "elementType": "geometry.fill",
              "stylers": [{ "color": "#ffffff" }]
            },
            {
              "featureType": "landscape.natural.terrain",
              "elementType": "geometry.fill",
              "stylers": [{ "color": "#000000" }]
            },
            {
              "featureType": "poi",
              "elementType": "geometry.fill",
              "stylers": [{ "color": "#eeeeee" }]
            },
            {
              "featureType": "administrative",
              "elementType": "labels.text.fill",
              "stylers": [{ "color": "#2ec3f3" }]
            },
            {
              "featureType": "road.arterial",
              "elementType": "geometry.fill",
              "stylers": [{ "color": "#eeeeee" }]
            },
            {
              "featureType": "road.arterial",
              "elementType": "geometry.stroke",
              "stylers": [{ "color": "#cccccc" }]
            },
            {
              "featureType": "road",
              "elementType": "labels.text.fill",
              "stylers": [{ "color": "#666666" }]
            },
            {
              "featureType": "road",
              "elementType": "labels.text.stroke",
              "stylers": [{ "color": "#ffffff" }]
            },
            {
              "featureType": "road.highway",
              "elementType": "geometry.fill",
              "stylers": [{ "color": "#bbbbbb" }]
            },
            {
              "featureType": "road.highway",
              "elementType": "geometry.stroke",
              "stylers": [{ "color": "#dddddd" }]
            },
            {
              "featureType": "road.local",
              "elementType": "geometry.fill",
              "stylers": [{ "color": "#e5e5e5" }]
            },
            {
              "featureType": "water",
              "elementType": "geometry.fill",
              "stylers": [{ "visibility": "off" }]
            },
            {
                featureType: "poi.business",
                elementType: "labels.icon",
                stylers: [
                  { visibility: "off" }
                ]
              },{
                featureType: "poi.school",
                elementType: "labels.icon",
                stylers: [
                  { visibility: "off" }
                ]
              },{
                featureType: "poi.park",
                elementType: "labels.icon",
                stylers: [
                  { visibility: "off" }
                ]
              }
          ];

Answer 1

这是创建地图和标记的基础知识，我不确定是否禁用移动滚动：

function initMap() {
    var styles = [{
        featureType: "landscape",
        elementType: "geometry.fill",
        stylers: [{
            color: "#ffffff"
        }]
    }, {
        featureType: "landscape.natural.terrain",
        elementType: "geometry.fill",
        stylers: [{
            color: "#000000"
        }]
    }, {
        featureType: "poi",
        elementType: "geometry.fill",
        stylers: [{
            color: "#eeeeee"
        }]
    }, {
        featureType: "administrative",
        elementType: "labels.text.fill",
        stylers: [{
            color: "#2ec3f3"
        }]
    }, {
        featureType: "road.arterial",
        elementType: "geometry.fill",
        stylers: [{
            color: "#eeeeee"
        }]
    }, {
        featureType: "road.arterial",
        elementType: "geometry.stroke",
        stylers: [{
            color: "#cccccc"
        }]
    }, {
        featureType: "road",
        elementType: "labels.text.fill",
        stylers: [{
            color: "#666666"
        }]
    }, {
        featureType: "road",
        elementType: "labels.text.stroke",
        stylers: [{
            color: "#ffffff"
        }]
    }, {
        featureType: "road.highway",
        elementType: "geometry.fill",
        stylers: [{
            color: "#bbbbbb"
        }]
    }, {
        featureType: "road.highway",
        elementType: "geometry.stroke",
        stylers: [{
            color: "#dddddd"
        }]
    }, {
        featureType: "road.local",
        elementType: "geometry.fill",
        stylers: [{
            color: "#e5e5e5"
        }]
    }, {
        featureType: "water",
        elementType: "geometry.fill",
        stylers: [{
            visibility: "off"
        }]
    }, {
        featureType: "poi.business",
        elementType: "labels.icon",
        stylers: [{
            visibility: "off"
        }]
    }, {
        featureType: "poi.school",
        elementType: "labels.icon",
        stylers: [{
            visibility: "off"
        }]
    }, {
        featureType: "poi.park",
        elementType: "labels.icon",
        stylers: [{
            visibility: "off"
        }]
    }];

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 17,
        center: {
            lat: -15.4165216,
            lng: 28.2794958
        },
        styles: styles
    });

    var marker = new google.maps.Marker({
        position: {
            lat: -15.4165216,
            lng: 28.2794958
        },
        map: map
    });
}

google.maps.event.addDomListener(window, "load", initMap);

您可以在此处查看实际效果：http://jsfiddle.net/duncancumming/dajgrrvx/3/

Google 映射传递样式并禁用移动设备上的滚动

Google maps passing styles and disable scroll on mobile device

google-maps

google-maps-markers

google-maps-api-2