地图不会在网址上显示 [英] Map not displaying on url

查看:67
本文介绍了地图不会在网址上显示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

今天我试图创建一个带有一些数据的谷歌地图,事情是,我复制/粘贴谷歌地图的代码示例,但没有什么是未来...我得到一个空白页....我疯了吗?
你能告诉我发生了什么事吗?
我使用的是chrome和firefox ..都是空白的。

 <!DOCTYPE html> 
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0,user-scalable = no/>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/>
< title> Google Maps JavaScript API v3示例:Polygon Arrays< / title>
< link href =/ maps / documentation / javascript / examples / default.css =stylesheettype =text / css/>
< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?sensor=false>< / script>
< script type =text / javascript>

var map;
var infoWindow;

函数initialize(){
var myLatLng = new google.maps.LatLng(24.886436490787712,-70.2685546875);
var myOptions = {
zoom:5,
center:myLatLng,
mapTypeId:google.maps.MapTypeId.TERRAIN
};

var bermudaTriangle;

map = new google.maps.Map(document.getElementById(map_canvas),
myOptions);

var triangleCoords = [
new google.maps.LatLng(25.774252,-80.190262),
new google.maps.LatLng(18.466465,-66.118292),
new google.maps.LatLng(32.321384,-64.75737)
];

bermudaTriangle = new google.maps.Polygon({
paths:triangleCoords,
strokeColor:#FF0000,
strokeOpacity:0.8,
strokeWeight :3,
fillColor:#FF0000,
fillOpacity:0.35
});

bermudaTriangle.setMap(map);

//为点击事件添加监听器
google.maps.event.addListener(bermudaTriangle,'click',showArrays);

infowindow = new google.maps.InfoWindow();


function showArrays(event){

//由于这个Polygon只有一条路径,我们可以调用getPath()
//返回LatLng的MVCArray
var vertices = this.getPath();

var contentString =< b>百慕大三角形多边形< / b>< br />;
contentString + =点击位置:< br /> + event.latLng.lat()+,+
event.latLng.lng()+< br />;

//遍历顶点。 (var i = 0; i< vertices.length; i ++){
var xy = vertices.getAt(i);
contentString + =< br /> +坐标:+ i +< br /> + xy.lat()+,+ xy.lng();
}

//替换我们的信息窗口的内容和位置
infowindow.setContent(contentString);
infowindow.setPosition(event.latLng);

infowindow.open(map);
}
< / script>
< / head>
< body onload =initialize()>
< div id =map_canvas>< / div>
< / body>
< / html>


解决方案

问题是您复制了相对引用Google的样式表,这就是定义 map_canvas 的大小。



如果你明确地设置 div 的大小,或者使用样式表的绝对引用,它将起作用(我刚刚尝试过)。


today i'm trying to create a google map with some data, the thing is that i'm copying/pasting the code of google maps examples, but nothing is coming... i get a blank page.... Am i that crazy? Can you please tell me what's going on? I'm using chrome and firefox.. both blank.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Polygon Arrays</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"  type="text/css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var map;
var infoWindow;

function initialize() {
var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
var myOptions = {
  zoom: 5,
  center: myLatLng,
  mapTypeId: google.maps.MapTypeId.TERRAIN
 };

 var bermudaTriangle;

 map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

 var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737)
 ];

 bermudaTriangle = new google.maps.Polygon({
  paths: triangleCoords,
  strokeColor: "#FF0000",
  strokeOpacity: 0.8,
  strokeWeight: 3,
  fillColor: "#FF0000",
  fillOpacity: 0.35
 });

 bermudaTriangle.setMap(map);

 // Add a listener for the click event
 google.maps.event.addListener(bermudaTriangle, 'click', showArrays);

 infowindow = new google.maps.InfoWindow();
 }

 function showArrays(event) {

// Since this Polygon only has one path, we can call getPath()
// to return the MVCArray of LatLngs
var vertices = this.getPath();

var contentString = "<b>Bermuda Triangle Polygon</b><br />";
contentString += "Clicked Location: <br />" + event.latLng.lat() + "," + 
event.latLng.lng() + "<br />";

// Iterate over the vertices.
for (var i =0; i < vertices.length; i++) {
  var xy = vertices.getAt(i);
  contentString += "<br />" + "Coordinate: " + i + "<br />" + xy.lat() +"," + xy.lng();
}

// Replace our Info Window's content and position
infowindow.setContent(contentString);
infowindow.setPosition(event.latLng);

infowindow.open(map);
}  
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

解决方案

The problem is that you have copied the relative reference to Google's stylesheet, and that's where the size of map_canvas is defined.

If you set the size of that div explicitly, or use an absolute reference to the stylesheet, it will work (I just tried that).

这篇关于地图不会在网址上显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆