Question

我在google开发人员上关注谷歌地图的教程并尝试制作谷歌地图标记。但是在我成功完成之后，地图上的图钉只显示了一个白色矩形，而不是地图图钉。 Here is the link I made

以下是我的代码：

head.php：

<head>
    <title><?php echo $title; ?></title>
    <meta charset = "UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style/sponsor_enquiry_style.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script type="text/javascript" src="script/script.js"></script>
    <script type="text/javascript" src="script/map.js"></script>
</head>

enquiry.php

<!DOCTYPE html>
<html>
<?php
    $title = 'Enquiry';
    include 'php/head.php';
?>
<body>
    <?php
        include 'php/nav.php';
        include 'php/header.php';
        include 'php/preloader.php';
    ?>
    <section class = "main_content">
        <div id = "enquiry_content">
            <div id = "opening_info">
                <h1>// OPENING</h1>
                <h1 class = "font_ch">開幕典禮</h1>
                <h2>13.6.15</h2>
                <p>15:00–17:00</p>
                <p>Room CVA 104, Communication and Visual Arts Building, HKBU, 5 Hereford Road, Kowloon Tong, Kowloon</p>
                <p class = "font_ch">九龍塘禧福道五號香港浸會大學傳理視藝大樓104室</p>
            </div>
            <div id = "exhibition_info">
                <h1>// EXHIBITION</h1>
                <h1 class = "font_ch">展覽期</h1>
                <h2>14–21 June</h2>
                <p>11:00–21:00</p>
                <p>Koo Ming Kown Exhibition Gallery CVA Bldg, HKBU</p>
                <p class = "font_ch">浸大傳理及視藝大樓顧明均展覽廳</p>
            </div>
            <div id = "screening_info">
                <h1>// SCREENING</h1>
                <h1 class = "font_ch">放映會</h1>
                <h2>14 &#38; 21 June</h2>
                <p>14:00–18:00</p>
                <p>Yue Hwa Chinese Products Lecture Theatre CVA Bldg, HKBU</p>
                <p class = "font_ch">浸大傳理及視藝大樓裕華國貨演講廳</p>
            </div>
            <div id="map-canvas"></div>
        </div>
    </section>
    <?php
        include 'php/footer.php';
    ?>
</body>
</html>

sponsor_enquiry_style.css：

.main_content {
    padding: 80px 15px;
    width: 600px;
    max-width: 95%;
    margin: 0 auto;
}

.main_content h1 {
    display: inline-block;
}

.main_content #enquiry_content #opening_info, .main_content #enquiry_content #exhibition_info, .main_content #enquiry_content #screening_info, .main_content #sponsors_content #organizer_info, .main_content #sponsors_content #media_info{
    margin: 30px 0;
}

.main_content #sponsors_content .sponsor_icons img {
    transform: scale(0.85, 0.85);
    -o-transform: scale(0.85, 0.85);
    -ms-transform: scale(0.85, 0.85);
    -webkit-transform: scale(0.85, 0.85);
}

#map-canvas {
    max-width: 100%;
    height: 300px;
  }

map.js

function initialize() {
  var myLatlng = new google.maps.LatLng(22.334134,114.182465);
  var mapOptions = {
    zoom: 15,
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

我不确定它有什么好处，但在home.css中你为<canvas>定义了一个影响地图的风格（使用画布）。使用更具体的选择器，其中不包括#map-canvas

谷歌地图标记不起作用

1 个答案: