我正在使用谷歌地图的商店定位器和当前位置，我在其中显示其他位置(其他位置的纬度和经度已经在我的数据库中)在我 200 英里的半径内并且它工作正常但是在链接 css 之后我页面中的文件，一切正常，除了附近位置标记的信息窗口没有显示。
代码在这里:- 索引.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Google Maps AJAX + mySQL/PHP Example</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- <link rel="stylesheet" href="css/jquery.mobile-1.0.1.css" />-->
<script src="http://maps.google.com/maps/api/js?sensor=true"
type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<!-- Cordova-1.5.0.js file will be here -->
<script type="text/javascript" src="js/cordova-1.5.0.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var markers = [];
var infoWindow;
var locationSelect;
var F_lat=null;
var S_lat;
function load() {
document.addEventListener("deviceready", onDeviceReady, false);
//alert('hi1');
onDeviceReady() ;
}
function onDeviceReady() {
//alert('hi2');
if(!!navigator.geolocation) {
var mapOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
navigator.geolocation.getCurrentPosition(function(position) {
var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
F_lat=position.coords.latitude;
S_lat=position.coords.longitude;
var infowindow = new google.maps.InfoWindow({
map: map,
position: geolocate,
content:
'<h3>current Location</h3>' +
'<h3>Latitude: ' + position.coords.latitude + '</h3>' +
'<h3>Longitude: ' + position.coords.longitude + '</h3>'
});
map.setCenter(geolocate);
searchLocationsNear(F_lat,S_lat);
});
// searchLocationsNear(F_lat,S_lat);
} else {
document.getElementById('map').innerHTML = 'No Geolocation Support.';
}
infoWindow = new google.maps.InfoWindow();
locationSelect = document.getElementById("locationSelect");
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
if (markerNum != "none"){
google.maps.event.trigger(markers[markerNum], 'click');
}
};
// if (status == google.maps.GeocoderStatus.OK) {
// searchLocationsNear(F_lat,S_lat);
// alert('prakash:-'+F_lat);
// } else {
// alert(address + ' not found');
// }
}
function searchLocations() {
//var address = document.getElementById("addressInput").value;
var address = prompt("Please enter your location", "");
if(address){
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
searchLocationsNear(results[0].geometry.location.lat(),results[0].geometry.location.lng());
// alert('prakash:-'+results[0].geometry.location.lng());
} else {
alert(address + ' not found');
}
});
}else{
alert('Please enter address');
}
}
function clearLocations() {
infoWindow.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
locationSelect.innerHTML = "";
var option = document.createElement("option");
option.value = "none";
option.innerHTML = "See all results:";
locationSelect.appendChild(option);
}
function searchLocationsNear(lat1,lng2) {
clearLocations();
if(F_lat){
var searchUrl = 'phpsqlsearch_genxml.php?lat=' + lat1 + '&lng=' + lng2 + '&radius=200';
}
else if(F_lat===null){
// var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'phpsqlsearch_genxml.php?lat=' + lat1 + '&lng=' + lng2 + '&radius=200';
}
//var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++) {
var name = markerNodes[i].getAttribute("name");
var address = markerNodes[i].getAttribute("address");
var distance = parseFloat(markerNodes[i].getAttribute("distance"));
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
createOption(name, distance, i);
createMarker(latlng, name, address);
bounds.extend(latlng);
}
map.fitBounds(bounds);
locationSelect.style.visibility = "visible";
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
google.maps.event.trigger(markers[markerNum], 'click');
};
});
}
function createMarker(latlng, name, address) {
//alert(latlng+''+name+''+address);
var html = "<b>" + name + "</b> <br/>" + address;
var marker = new google.maps.Marker({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
}
function createOption(name, distance, num) {
var option = document.createElement("option");
option.value = num;
option.innerHTML = name + "(" + distance.toFixed(1) + ")";
locationSelect.appendChild(option);
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
function doNothing() {}
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="load()">
<div data-role="page" id="index">
<!-- header start -->
<div data-role="header">
<div class="top-home-left">Vision Zero</div>
<div class="top-home-right">
<a href="tel:311" onclick="return call();"><img src="images/call.png" alt=""></a>
</div>
<div class="clear"></div>
</div>
<!-- header end -->
<div><select id="locationSelect" style="width:100%;visibility:hidden"></select></div>
<!-- <div class="map">f</div> -->
<div data-role="content" style="padding:0;">
<div id="map" style="width:100%;height:100%;"></div>
</div>
</div>
<!-- bottom start -->
<div class="bottom">
<div class="bottom-btn1"><a href="setting.html"><img src="images/settings39.png" alt=""></a></div>
<div class="bottom-btn2"><a href="#" onclick="searchLocations()"><img src="images/magnifier5.png" alt=""></a></div>
<div class="bottom-btn3"><a href="area.html"><img src="images/folder5.png" alt="" ></a></div>
<div class="bottom-btn4"><a href="GoogleMapDirections.html"><img src="images/map2.png" alt=""></a></div>
<div class="clear"></div>
</div>
<!-- bottom end -->
</div>
</body>
</html>
和 CSS 文件:- style.css
@charset "utf-8";
/* CSS Document */
/* Body Panel Start */
body {
color:#fff;
line-height:24px; font-family:Arial, Helvetica, sans-serif; line-height:20px;
}
a, a > * {
color: #4ac3f0;
text-decoration: none;
-webkit-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out;
-moz-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out;
-ms-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out;
-o-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out;
transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out;
}
*::-moz-selection {
background: none repeat scroll 0 0 #00AB00;
color: #fff;
text-shadow: none;
}
*::selection {
background: none repeat scroll 0 0 #00AB00;
color: #fff;
text-shadow: none;
}
h1, h2, h3, h4, h5 {
margin: 0;
padding: 0;
color: #000;
line-height:100%;
}
p {
font-size:14px;
}
.clear {
clear:both;
}
.wrapper {
width:100%;
}
.contenair { width:100%; }
.contenair ul { width:100%; }
.contenair li { list-style:none; color:#fff; }
.contenair a { text-decoration:none; color:#fff; line-height:35px; background:#262626; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; padding:6px; display:block; margin-bottom:10px; }
.contenair a:hover { background:#222222; }
.top { width:100%; position:fixed; top:0; }
.top-left { width:10%; float:left; background:#00837b url(../images/top-line.jpg) repeat-y right top; }
.top-middle { width:80%; float:left; }
.top-tight { width:10%; float:left; background:#00837b url(../images/top-line.jpg) repeat-y left top; }
.top-home-left {width:90%; text-align:center; background:#008d84; color:#fff; padding:12px 0px 12px 0px; float:left; }
.top-home-right {width:10%; text-align:center; background:#00837b url(../images/top-line.jpg) repeat-y left top; color:#fff; float:left; }
.top-home-right a { padding:12px 0px 12px 0px; display:block; }
.top-home-right a:hover { padding:12px 0px 12px 0px; display:block; background:#00a99e; }
.bottom {width:100%; background:#222222; color:#fff; position:fixed; bottom:0; }
.bottom-btn1 { width:25%; float:left; background:#262626 url(../images/bottom-line.jpg) repeat-y right top; text-align:center; }
.bottom-btn1 a { padding:12px 0px 12px 0px; display:block; }
.bottom-btn1 a:hover { display:block; background:#00a99e; }
.bottom-btn2 { width:25%; float:left; background:#222222 url(../images/bottom-line.jpg) repeat-y right top; text-align:center; }
.bottom-btn2 a { padding:12px 0px 12px 0px; display:block; }
.bottom-btn2 a:hover { display:block; background:#00a99e; }
.bottom-btn3 { width:25%; float:left; background:#262626 url(../images/bottom-line.jpg) repeat-y right top; text-align:center; }
.bottom-btn3 a { padding:12px 0px 12px 0px; display:block; }
.bottom-btn3 a:hover { display:block; background:#00a99e; }
.bottom-btn4 { width:25%; float:left; background:#222222 url(../images/bottom-line.jpg) repeat-y right top; text-align:center; }
.bottom-btn4 a { padding:12px 0px 12px 0px; display:block; }
.bottom-btn4 a:hover { display:block; background:#00a99e; }
.map { width:100%; height:700px; background:url(../images/map2.jpg) no-repeat left top; }
.map img { width:100%; }
/* setting */
.inner-top-right {width:90%; text-align:center; background:#008d84; color:#fff; padding:12px 0px 12px 0px; float:left; }
.inner-top-left {width:10%; text-align:center; background:#00837b url(../images/top-line.jpg) repeat-y right top; color:#fff; float:left; }
.inner-top-left a { padding:12px 0px 12px 0px; display:block; }
.inner-top-left a:hover { padding:12px 0px 12px 0px; display:block; background:#00a99e; }
.setting-bg { width:100%; background:#00a99e url(../images/map.png) no-repeat center top; height:100%; height:100%; position:absolute; z-index:-1;}
.setting-wrapper { width:70%; margin:0 auto; padding-top:100px; }
.setting-left { width:70%; float:left; margin-bottom:30px; }
.setting-right { width:30%; float:right; margin-bottom:30px; }
/* area */
.area-top-middle {width:80%; text-align:center; background:#008d84; color:#fff; padding:12px 0px 12px 0px; float:left; }
.area-top-left {width:10%; text-align:center; background:#00837b url(../images/top-line.jpg) repeat-y right top; color:#fff; float:left; }
.area-top-left a { padding:12px 0px 12px 0px; display:block; }
.area-top-left a:hover { padding:12px 0px 12px 0px; display:block; background:#00a99e; }
.area-top-right {width:10%; text-align:center; background:#00837b url(../images/top-line.jpg) repeat-y left top; color:#fff; float:left; }
.area-top-right a { padding:12px 0px 12px 0px; display:block; }
.area-top-right a:hover { padding:12px 0px 12px 0px; display:block; background:#00a99e; }
.text-center { text-align:center; }
.area-textbox { width:100%; border:0px; background:#fff; outline:none; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; margin-bottom:10px; padding:10px 0px 10px 0px; text-align:center; font-size:14px; }
.area-btn { width:60%; border:0px; background:#222222; outline:none; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; margin-bottom:10px; padding:12px 0px 12px 0px; color:#fff; cursor:pointer; text-align:center; font-size:14px; }
/* Routes */
最佳答案
使用
icon: getMarkerImage(color),
与
function createMarker(latlng, name, address) {
//alert(latlng+''+name+''+address);
var html = "<b>" + name + "</b> <br/>" + address;
var marker = new google.maps.Marker({
map: map,
position: latlng,
icon: getMarkerImage(color) //New Added
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
}
设置图像使用
function getMarkerImage(iconStr) {
if ((typeof (iconStr) == "undefined") || (iconStr == null)) {
iconStr = "red";
}
if (!icons[iconStr]) {
icons[iconStr] = new google.maps.MarkerImage(""http://www.google.com/mapfiles/marker""+ iconStr +"".png"",
//icons[iconStr] = new google.maps.MarkerImage("images1/small-marker-truck.png",
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(26, 32),
// The origin for this image is 0,0.
new google.maps.Point(0, 0),
// The anchor for this image is at 6,20.
new google.maps.Point(9, 32));
}
return icons[iconStr];
}
关于javascript - 谷歌地图标记在链接 css 文件后不显示位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25181593/