谷歌地图传递样式并在移动设备上禁用滚动

Posted 2023-03-28

【中文标题】谷歌地图传递样式并在移动设备上禁用滚动

【英文标题】：Google maps passing styles and disable scroll on mobile device

【发布时间】：2015-12-23 03:17:33

【问题描述】：

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

这是我现在拥有的

  //<![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" 
                ]
              
          ];

【问题讨论】：

GMap2 不再有效，Google Maps API v2 很久以前就停止了。您应该更新所有 JS 代码以改用 API v3。见developers.google.com/maps/articles/v2tov3

我同意，但我不知道如何:(

您所做的只是创建一个地图并添加一些标记，请参阅developers.google.com/maps/documentation/javascript/markers的示例

@duncan 你能为 V3 API 写一个解决方案，我可以接受吗？

【参考方案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/