我正在使用一些商店标记显示谷歌地图，这在PC中运行良好，但在移动设备中存在一些问题。
当我将鼠标悬停在桌面上的商店时，会显示位置标签。
检查示例链接：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>
答案 0 :(得分：0)
您无法在移动设备上悬停事件。我相信你明白了。
相反，您可以使用所需的数据创建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>