[英]Google map is not zooming in & marker is not showing on page load
我面临Google地图问题。 页面加载时无法正确显示带有标记的内容。 当我们放大显示的地图时,它似乎可以用标记正确显示。
任何帮助表示赞赏。
这是javascript代码:-
var GoogleMap = function(canvas, address)
{
var _parent = this;
this.location = new google.maps.LatLng(-34.397, 150.644);
var options =
{
center: this.location,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions:
{
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_CENTER
},
streetViewControl: false
};
this.map = new google.maps.Map(canvas, options);
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status)
{
if (status != google.maps.GeocoderStatus.OK)
return;
_parent.location = results[0].geometry.location;
var marker = new google.maps.Marker(
{
map: _parent.map,
position: _parent.location
});
_parent.resize();
});
};
GoogleMap.prototype.resize = function()
{
google.maps.event.trigger(this.map, "resize");
this.map.setCenter(this.location);
}
var Maps = function(classes)
{
var _parent = this;
_parent.maps = new Array();
classes.each(function()
{
_parent.maps.push(new GoogleMap($(this).get(0), $(this).attr("data-address")));
});
};
Maps.prototype.resize = function()
{
for (var cnt = 0; cnt < this.maps.length; cnt++)
{
this.maps[cnt].resize();
}
};
var maps;
$(window).load(function()
{
maps = new Maps($(".gMapsCanvas"));
});
这是HTML代码:-
<div class="gMapsCanvas" data-address="Address,City,State,Country"></div>
对我来说很好。 您提供了什么地址。 控制台中是否有错误?
将此示例复制到一个普通的.html
文件中,您将看到它的工作原理。 然后找出整个页面的不同之处:
<!DOCTYPE html>
<html>
<head>
<title>Getting Zoom Demo</title>
<style type="text/css">
html, body{ height: 100%; height: 100%; margin: 0; padding: 0; }
.gMapsCanvas{ height: 100%; width: 100%; min-width:500px; min-height:300px; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</head>
<body>
<div>
<label id="display-zoom-label">
</label>
</div>
<div class="gMapsCanvas" data-address="3209 West Smith Valley Road, Greenwood, IN"></div>
<script>
var GoogleMap = function (canvas, address) {
var _parent = this;
this.location = new google.maps.LatLng(-34.397, 150.644);
var options =
{
center: this.location,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions:
{
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_CENTER
},
streetViewControl: false
};
this.map = new google.maps.Map(canvas, options);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function (results, status) {
if (status != google.maps.GeocoderStatus.OK)
return;
_parent.location = results[0].geometry.location;
var marker = new google.maps.Marker(
{
map: _parent.map,
position: _parent.location
});
_parent.resize();
});
};
GoogleMap.prototype.resize = function () {
google.maps.event.trigger(this.map, "resize");
this.map.setCenter(this.location);
}
var Maps = function (classes) {
var _parent = this;
_parent.maps = new Array();
classes.each(function () {
_parent.maps.push(new GoogleMap($(this).get(0), $(this).attr("data-address")));
});
};
Maps.prototype.resize = function () {
for (var cnt = 0; cnt < this.maps.length; cnt++) {
this.maps[cnt].resize();
}
};
var maps;
$(window).load(function () {
maps = new Maps($(".gMapsCanvas"));
});
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.