javascript - 谷歌地图标记在移动设备中悬停时显示标签

Question

我正在显示带有一些商店标记的谷歌地图，这些标记在电脑上运行良好，但在移动设备上遇到一些问题。

当我将鼠标悬停在桌面上的商店时，它会显示位置标签。

检查示例链接:https://jsfiddle.net/mishragaurav31/7e8vkmoa/3/

但是当我在移动设备中打开它时，悬停不会执行任何操作如何解决此问题如何在移动设备中显示标签？

HTML 代码:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="http://maps.google.com/maps/api/js" type="text/javascript"></script>
<div id="map" style="height:600px"></div>

JS代码:

<script>
    $(window).ready(function () {
        var g = {"StoreLocatorResp":{"result":0,"faultMessage":"","locationList":[{"nodename":"Caltex Cessnyl Cstore","contactname":"Casper","contactno":"27147173467","address":",11 Nelson Mandela Drive,MODIMOLLE,LIMPOPO","longitude":28.4053027,"latitude":-24.6995526,"distance":531.53},{"nodename":"Caltex Freshstop Eager Motors","contactname":"Gerhardus","contactno":"27154914732","address":",90 Thabo Mbeki Drive,MOKOPANE,LIMPOPO","longitude":29.012146,"latitude":-24.186636,"distance":83974.75},{"nodename":"Caltex Freshstop Wonderpark","contactname":"Jacobus","contactno":"27125491562","address":",Cnr Brits and Henrich,PRETORIA NORTH,GAUTENG","longitude":28.1086347,"latitude":-25.6745512,"distance":111936.53},{"nodename":"Caltex Freshstop Groblersdal","contactname":"Karin","contactno":"27132624725","address":",18 Hereford Street,Groblersdal,Mpumalanga","longitude":29.3971019,"latitude":-25.1645345,"distance":112111.63},{"nodename":"Caltex Freshstop Conlee Motors","contactname":"Jacob","contactno":"27123330128","address":",1052 Nico Smit,VILLIERIA,GAUTENG","longitude":28.2358784,"latitude":-25.7184941,"distance":114028.34},{"nodename":"Davinico Pty Ltd","contactname":"Thabo","contactno":"27837751863","address":",113 Camberland Avenue,BRYNTIRION,GAUTENG","longitude":28.2153572,"latitude":-25.7273471,"distance":115327.56},{"nodename":"Caltex Freshstop Waterkloof Glen Motors","contactname":"Charle","contactno":"27129935739","address":",374 Roslyn Avenue,WATERKLOOF,GAUTENG","longitude":28.274938,"latitude":-25.799138,"distance":122405.42},{"nodename":"Caltex Freshstop Excelsior Motors","contactname":"Martin","contactno":"27126646592","address":",108 Trichardt Street Centurion,LYTTELTON,GAUTENG","longitude":28.198886,"latitude":-25.819358,"distance":125683.2},{"nodename":"Caltex Xanadu Service Station","contactname":"Mitchell","contactno":"27122591854","address":"Xanadu Eco Park,R511,HARTBEESPOORT,GAUTENG","longitude":27.9477394,"latitude":-25.7706558,"distance":127192.76},{"nodename":"Q-Mart Pty Ltd","address":"Centurion Gate Business Park,124 Akkerboom Street,CENTURION,CENTURION,0157","longitude":28.1883773,"latitude":-25.8665364,"distance":131027.58}]}};
        var decode = jQuery.makeArray(g);
        var locations = jQuery.makeArray(decode[0].StoreLocatorResp.locationList);
        var mylocation = new google.maps.LatLng(-24.704055, 28.407081);
        google.maps.visualRefresh = true;
        var mapProp = {
            center: mylocation,
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false,
            navigationControl: true,
            mapTypeControl: false,
            scaleControl: false,
            draggable: true,
            clickable: false
        };
        var map = new google.maps.Map(document.getElementById("map"), mapProp);
        var marker = new google.maps.Marker({
            position: mylocation,
            map: map,
            title: 'My Location'
        });
        marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png')

        for (var i = 0; i < locations.length; i++) {
            //alert(locations[i].nodename)
            var mylocation = new google.maps.LatLng(locations[i].latitude, locations[i].longitude);
            var marker = new google.maps.Marker({
                position: mylocation,
                map: map,
                title: locations[i].nodename + "\n" + locations[i].address



            });
            marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')
        }

    });


</script>

Answer 1

您无法在移动设备上进行悬停事件。我相信你明白这一点。

相反，您可以使用所需的数据创建 InfoWindow，并将其设置为单击时打开。这样，当您触摸移动设备上的标记时，它将打开。

更新

因为您采用外部 json，所以您可以使用以下方法将新对象推送给它:

  g.StoreLocatorResp.locationList.push({
    nodename: "My Location",
    address: "My Location address",
    longitude: "28.407081",
    latitude: "-24.704055",
    icon: "http://maps.google.com/mapfiles/ms/icons/red-dot.png"
  });

示例看起来像这样(用上面的代码更新):

$(window).ready(function() {
  var g = {
    "StoreLocatorResp": {
      "result": 0,
      "faultMessage": "",
      "locationList": [{
        "nodename": "Caltex Cessnyl Cstore",
        "contactname": "Casper",
        "contactno": "27147173467",
        "address": ",11 Nelson Mandela Drive,MODIMOLLE,LIMPOPO",
        "longitude": 28.4053027,
        "latitude": -24.6995526,
        "distance": 531.53
      }, {
        "nodename": "Caltex Freshstop Eager Motors",
        "contactname": "Gerhardus",
        "contactno": "27154914732",
        "address": ",90 Thabo Mbeki Drive,MOKOPANE,LIMPOPO",
        "longitude": 29.012146,
        "latitude": -24.186636,
        "distance": 83974.75
      }, {
        "nodename": "Caltex Freshstop Wonderpark",
        "contactname": "Jacobus",
        "contactno": "27125491562",
        "address": ",Cnr Brits and Henrich,PRETORIA NORTH,GAUTENG",
        "longitude": 28.1086347,
        "latitude": -25.6745512,
        "distance": 111936.53
      }, {
        "nodename": "Caltex Freshstop Groblersdal",
        "contactname": "Karin",
        "contactno": "27132624725",
        "address": ",18 Hereford Street,Groblersdal,Mpumalanga",
        "longitude": 29.3971019,
        "latitude": -25.1645345,
        "distance": 112111.63
      }, {
        "nodename": "Caltex Freshstop Conlee Motors",
        "contactname": "Jacob",
        "contactno": "27123330128",
        "address": ",1052 Nico Smit,VILLIERIA,GAUTENG",
        "longitude": 28.2358784,
        "latitude": -25.7184941,
        "distance": 114028.34
      }, {
        "nodename": "Davinico Pty Ltd",
        "contactname": "Thabo",
        "contactno": "27837751863",
        "address": ",113 Camberland Avenue,BRYNTIRION,GAUTENG",
        "longitude": 28.2153572,
        "latitude": -25.7273471,
        "distance": 115327.56
      }, {
        "nodename": "Caltex Freshstop Waterkloof Glen Motors",
        "contactname": "Charle",
        "contactno": "27129935739",
        "address": ",374 Roslyn Avenue,WATERKLOOF,GAUTENG",
        "longitude": 28.274938,
        "latitude": -25.799138,
        "distance": 122405.42
      }, {
        "nodename": "Caltex Freshstop Excelsior Motors",
        "contactname": "Martin",
        "contactno": "27126646592",
        "address": ",108 Trichardt Street Centurion,LYTTELTON,GAUTENG",
        "longitude": 28.198886,
        "latitude": -25.819358,
        "distance": 125683.2
      }, {
        "nodename": "Caltex Xanadu Service Station",
        "contactname": "Mitchell",
        "contactno": "27122591854",
        "address": "Xanadu Eco Park,R511,HARTBEESPOORT,GAUTENG",
        "longitude": 27.9477394,
        "latitude": -25.7706558,
        "distance": 127192.76
      }, {
        "nodename": "Q-Mart Pty Ltd",
        "address": "Centurion Gate Business Park,124 Akkerboom Street,CENTURION,CENTURION,0157",
        "longitude": 28.1883773,
        "latitude": -25.8665364,
        "distance": 131027.58
      }]
    }
  };
  g.StoreLocatorResp.locationList.push({
    nodename: "My Location",
    address: "My Location address",
    longitude: "28.407081",
    latitude: "-24.704055",
    icon: "http://maps.google.com/mapfiles/ms/icons/red-dot.png"
  });
  var decode = jQuery.makeArray(g);
  var locations = jQuery.makeArray(decode[0].StoreLocatorResp.locationList);
  var mylocation = new google.maps.LatLng(-24.704055, 28.407081);
  google.maps.visualRefresh = true;
  var mapProp = {
    center: mylocation,
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false,
    navigationControl: true,
    mapTypeControl: false,
    scaleControl: false,
    draggable: true,
    clickable: false
  };
  var map = new google.maps.Map(document.getElementById("map"), mapProp);

  for (var i = 0; i < locations.length; i++) {
    if (locations[i].icon) {
      var icon = locations[i].icon;
    } else {
      var icon = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
    }
    var location = new google.maps.LatLng(locations[i].latitude, locations[i].longitude);
    var marker = new google.maps.Marker({
      position: location,
      map: map,
      title: locations[i].nodename + "\n" + locations[i].address,
      icon: icon
    });
    var content = locations[i].nodename + "<br/>" + locations[i].address;
    var infowindow = new google.maps.InfoWindow()
    google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
      return function() {
        infowindow.setContent(content);
        infowindow.open(map, marker);
      };
    })(marker, content, infowindow));
  }
});

<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://maps.google.com/maps/api/js"></script>

<div id="map" style="height:600px"></div>