谷歌地图标记不会显示(jQuery)
Posted
技术标签:
【中文标题】谷歌地图标记不会显示(jQuery)【英文标题】:Google maps marker wont show (jQuery) 【发布时间】:2018-05-14 14:25:14 【问题描述】:我的网站上有一个谷歌地图,我在上面放了一个标记。
如果我在本地运行我的项目,标记会显示得很好,但是一旦我将网站上线,标记就不会显示,我不知道为什么(也不会显示在 sn-p 中) .
#map
width: 100%;
height: 450px;
position: relative;
@media screen and (max-width: 768px)
#map
height: 200px;
<div id="map"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCefOgb1ZWqYtj7raVSmN4PL2WkTrc-KyA&callback=myMap"></script>
<script>
var google;
function init()
var myLatlng = new google.maps.LatLng(52.362487, 6.624294);
var mapOptions =
// How zoomed in the map is
zoom: 15,
// The latitude and longitude to center the map
center: myLatlng
;
// Get the html DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using out element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
var addresses = ['Dollepret'];
for (var x = 0; x < addresses.length; x++)
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&sensor=false', null, function(data)
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker(
position: latlng,
map: map,
label:
fontWeight: 'bold',
fontSize: '14px',
text: 'Dolle Pret'
);
);
google.maps.event.addDomListener(window, 'load', init);
</script>
【问题讨论】:
运行 sn-p 会出现错误“”消息“:“InvalidValueError:myMap 不是函数”,”。检查它包含的脚本 url&callback=myMap
。也许这与您遇到的问题有关...
【参考方案1】:
我在您的代码 sn-p 中收到此错误:
Mixed Content: The page at 'https://***.com/questions/47577158/google-maps-marker-wont-show-jquery#' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://maps.googleapis.com/maps/api/geocode/json?address=Dollepret&sensor=false'. This request has been blocked; the content must be served over HTTPS.
如果我将该 URL 更改为 HTTPS,它可以工作(显示标记)。
(注意sensor
参数不再需要了)
代码 sn-p:
html, body
height: 100%;
width: 100%;
margin: 0;
padding: 0px;
#map
width: 100%;
height: 100%;
position: relative;
/* @media screen and (max-width: 768px)
#map
height: 200px;
*/
<div id="map"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCefOgb1ZWqYtj7raVSmN4PL2WkTrc-KyA"></script>
<script>
var google;
function init()
var myLatlng = new google.maps.LatLng(52.362487, 6.624294);
var mapOptions =
// How zoomed in the map is
zoom: 15,
// The latitude and longitude to center the map
center: myLatlng
;
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using out element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
var addresses = ['Dollepret'];
for (var x = 0; x < addresses.length; x++)
$.getJSON('https://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&sensor=false', null, function(data)
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker(
position: latlng,
map: map,
label:
fontWeight: 'bold',
fontSize: '14px',
text: 'Dolle Pret'
);
);
google.maps.event.addDomListener(window, 'load', init);
</script>
【讨论】:
啊,好吧,现在花了这么长时间试图找出问题所在,我觉得很愚蠢。这确实是导致标记不出现的原因。非常感谢!以上是关于谷歌地图标记不会显示(jQuery)的主要内容,如果未能解决你的问题,请参考以下文章