标记无法显示在Google地图中

debugcn 发表于 Dev

hot_programmer

我制作了一个非常非常简单的Web应用程序。此应用程序显示了从mysql数据库到我的Google Maps的标记。这是我的桌子markers_titik

表markers_point

并且我已经做了一个简单的PHP来处理它。这是我的代码map_process.php

 <?php
//PHP 5 +

// database settings 
$db_username = 'root';
$db_password = '';
$db_name = 'test';
$db_host = 'localhost';

$mysqli = new mysqli($db_host, $db_username, $db_password, $db_name);

if (mysqli_connect_errno()) 
{
header('HTTP/1.1 500 Error: Could not connect to db!'); 
exit();
}

################ Continue generating Map XML #################

//Create a new DOMDocument object
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers"); //Create new element node
$parnode = $dom->appendChild($node); //make the node show up 

// Select all the rows in the markers table
$results = $mysqli->query("SELECT * FROM markers_titik WHERE 1");
if (!$results) {  
header('HTTP/1.1 500 Error: Could not get markers!'); 
exit();
} 

//set document header to text/xml
header("Content-type: text/xml"); 

// Iterate through the rows, adding XML nodes for each
while($obj = $results->fetch_object())
{
$node = $dom->createElement("markers");  
$newnode = $parnode->appendChild($node);   
$newnode->setAttribute("nama",$obj->nama);

$newnode->setAttribute("lat", $obj->lat);  
$newnode->setAttribute("lng", $obj->lng); 
$newnode->setAttribute("status", $obj->status);
$newnode->setAttribute("beban", $obj->beban);    
$newnode->setAttribute("bobot", $obj->bobot);   
}

echo $dom->saveXML();
?>

这是我创建地图的代码

<html>
<head>
<title>Google Map</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD21hdItqZ1Rba2uU8z9i922vPFp5DgdzE&sensor=false"></script>
<script type="text/javascript">
$(document).ready(function() {

var mapCenter = new google.maps.LatLng(-7.275920,112.791871); //Google map Coordinates
var map;

map_initialize(); // initialize google map

//############### Google Map Initialize ##############
function map_initialize()
{
        var googleMapOptions = 
        { 
            center: mapCenter, // map center
            zoom: 12, //zoom level, 0 = earth view to higher value
            //maxZoom: 18,
            //minZoom: 16,
            zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL //zoom control size
        },
            scaleControl: true, // enable scale control
            mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
        };

        map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions);         

        //Load Markers from the XML File, Check (map_process.php)
        $.get("map_process.php", function (data) {
            $(data).find("markers").each(function () {
                  var nama      = $(this).attr('nama');
                  var status    = '<p>'+ $(this).attr('status') +'</p>';
                  var beban     = '<p>'+ $(this).attr('beban') +'</p>';
                  var bobot         = $(this).attr('bobot');
                  var point     = new google.maps.LatLng(parseFloat($(this).attr('lat')),parseFloat($(this).attr('lng')));

            });
        }); 



}

});
</script>

 <style type="text/css">
 h1.heading{padding:0px;margin: 0px 0px 10px 0px;text-align:center;font: 18px Georgia, "Times New Roman", Times, serif;}

/* width and height of google map */
#google_map {width: 90%; height: 500px;margin-top:0px;margin-left:auto;margin-right:auto;}

/* Marker Info Window */
h1.marker-heading{color: #585858;margin: 0px;padding: 0px;font: 18px "Trebuchet MS", Arial;border-bottom: 1px dotted #D8D8D8;}
div.marker-info-win {max-width: 300px;margin-right: -20px;}
div.marker-info-win p{padding: 0px;margin: 10px 0px 10px 0;}
div.marker-inner-win{padding: 5px;}
button.save-marker, button.remove-marker{border: none;background: rgba(0, 0, 0, 0);color: #00F;padding: 0px;text-decoration: underline;margin-right: 10px;cursor: pointer;
}
</style>
</head>
<body>             
<h1 class="heading">Mitigation Urban Flood Map</h1>
<div align="center">Right Click to Drop a New Marker</div>
<div id="google_map"></div>
</body>
</html>

当我运行它时，我得到了我的地图，但标记未显示。我不知道出什么问题了

谢谢

约翰

google.maps.Marker构造函数采用一个Marker选项对象。以下示例向地图添加了一个简单的标记。

var map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions);

// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"marker0"
});

在您的情况下，应包括位置为“ point”的构造函数

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。