gpt4 book ai didi

mysql - 将标记从 XML 文件加载到 Google Map API

转载 作者:行者123 更新时间:2023-11-29 08:12:19 25 4
gpt4 key购买 nike

我的目标是能够从 SQL 数据库加载标记并将其显示在 googlemap 上。但我很难尝试从 xml 文件中读取标记。

这是我的 HTML 文件

  <!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>

html, body, #map-canvas
{
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>


function initialize()
{

var mapOptions =
{
zoom: 12,
center:new google.maps.LatLng(53.3478, -6.2597)//center over dublin
};

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

}

function loadXMLFile(){
var filename = 'markers.xml';
$.ajax({
type: "GET",
url: filename ,
dataType: "xml",
success: parseXML,
error : onXMLLoadFailed
});

function onXMLLoadFailed(){
alert("An Error has occurred.");
}

function parseXML(xml){
container = new nokia.maps.map.Container();
$(xml).find("marker").each(function(){
//Read the name, address, latitude and longitude for each Marker
var nme = $(this).find('name').text();
var address = $(this).find('address').text();
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var markerCoords = new nokia.maps.geo.Coordinate
(parseFloat(lat), parseFloat(lng));
container.objects.add(new nokia.maps.map.StandardMarker(
markerCoords, {text:nme}));

});
map.objects.add(container);
map.zoomTo(container.getBoundingBox(), false);
}


}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

这是我的 xml 文件

<?xml version="1.0"?>
<markers>
<marker>
<name>M1</name>
<address>Abbey Street</address>
<lat>53.3496</lat>
<lng>-6.257</lng>
</marker>
</markers>

map 正在渲染,但 map 上没有出现任何标记。我用谷歌搜索了这个问题,但找不到任何有帮助的东西。

最佳答案

  1. 您没有调用 loadXMLFile()
  2. 您没有包含 jquery 库
  3. 您没有创建 google.maps.Markers(看起来您使用的是某些诺基亚 API 的语法)。

    <!DOCTYPE html>
    <html>
    <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>

    html, body, #map-canvas
    {
    height: 100%;
    margin: 0px;
    padding: 0px
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <script>

    var map = null;
    function initialize()
    {

    var mapOptions =
    {
    zoom: 12,
    center:new google.maps.LatLng(53.3478, -6.2597)//center over dublin
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    loadXMLFile();
    }

    function loadXMLFile(){
    var filename = 'v3_SO_20140124_markers.xml';
    $.ajax({
    type: "GET",
    url: filename ,
    dataType: "xml",
    success: parseXML,
    error : onXMLLoadFailed
    });

    function onXMLLoadFailed(){
    alert("An Error has occurred.");
    }

    function parseXML(xml){
    var bounds = new google.maps.LatLngBounds();
    $(xml).find("marker").each(function(){
    //Read the name, address, latitude and longitude for each Marker
    var nme = $(this).find('name').text();
    var address = $(this).find('address').text();
    var lat = $(this).find('lat').text();
    var lng = $(this).find('lng').text();
    var markerCoords = new google.maps.LatLng(parseFloat(lat),
    parseFloat(lng));
    bounds.extend(markerCoords);
    var marker = new google.maps.Marker({position: markerCoords, map:map});
    });
    map.fitBounds(bounds);
    }
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>

working example

关于mysql - 将标记从 XML 文件加载到 Google Map API,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21337368/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com