2012-07-14 93 views
1

所以我正在制作一个简单的网站,其初始功能简单如此:从最近上传的KML文件初始化Google Maps API

用户上传KML文件到网站。 Google Maps API会使用此KML文件进行初始化,以便显示地图及其最近的移动。

现在这听起来很简单,但我在基础知识方面遇到了一些麻烦。这或多或少是我第一次参与Web开发,因此我正在尝试学习HTML,CSS,AJAX,PHP,Google Maps API V3以及KML文件格式。

要使用KML文件初始化谷歌地图API,首先必须建立一些基本信息,比如这个:

function initialize() { 
    var myLatlng = new google.maps.LatLng(40.65, -73.95); 
    var myOptions = { 
    zoom: 12, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

最重要的一点来看看这里是哪里居中地图。

除了这一点,必须指定KML文件使用方法:

var nyLayer = new google.maps.KmlLayer(
     'http://www.searcharoo.net/SearchKml/newyork.kml', 
     { suppressInfoWindows: true, 
     map: map}); 

这些当然只是例子,不是我将使用数据。

现在我的问题是这样的。这些值似乎是预先确定的和静态的。要初始化Google Maps API,这些值需要事先知道。但在我的情况下,直到用户上传KML文件,才会知道这些值。

到目前为止,我有一个简单的PHP脚本来处理文件上传。我不知道如何将控制权交给包含Google地图设置的JavaScript,或者如何编写此代码,以便仅在文件上传后才知道的值用于初始化地图。

总之,我的意思来实现是这样的:

用户浏览到KML文件。用户按下“上传”按钮。文件已上传,然后立即用于初始化显示其移动的地图。

我可能写得太多了,但我认为最好写得不够多。预先感谢您的建议。

+0

KmlLayer更改地图以显示KML文件的内容(除非您指定preserveViewport选项为true)。 – geocodezip 2012-07-14 17:00:43

回答

1

鉴于您发布的代码片段,KmlLayer应居中放大以显示kml文件的内容。如果没有这样做,请提供足够的信息来重现问题(kml文件和显示它的html/js文件)。

编辑: 您写道:

我需要我的PHP文件上传脚本保存KML文件的名称, 然后不知何故,我需要提取关于在地图应居中信息,

你并不需要做的,除非你不喜欢中心的默认行为,并缩放地图,显示KML的所有内容

,然后用我刚刚提取的信息调用Google Maps API(我相信是JavaScript) 。 这一切都需要按一下上传按钮来完成。

是的。

EDIT2:

好的,但如何?我不知道该怎么办。这是我第一次尝试web开发。 我不要求别人写的代码对我来说,但如何做到这一点

第1步指针:This example from the documentation说明如何显示KML文件,替换参考的“http:// gmaps -samples.googlecode.com/svn/trunk/ggeoxml/cta.kml',并引用你想要显示的kml文件。

第2步:改变你的PHP生成加载和点击按钮时显示它所需的HTML和JavaScript。这是如何工作的将取决于你想要在你的页面上显示它的位置,以及你是否希望它是一个隐藏的div,当按钮被点击时,显示一个新窗口或其他东西。

+0

这些代码片段仅仅是Google Maps API文档中的示例。 KML文件的名称和特征只有在我们上传之后才会知道,这是我的问题。所以我需要写一些脚本来使用变量?我需要我的php文件上传脚本来保存KML文件的名称,然后以某种方式提取有关地图应居中位置的信息,然后调用Google Maps API(我相信它是JavaScript),并将信息I刚刚提取。这一切都需要按一下上传按钮来完成。 – cherryduck 2012-07-15 19:16:58

+0

好的,但是如何?我不知道该怎么办。这是我第一次尝试web开发。我不是要求某人为我编写代码,而是指示如何执行此操作,谢谢。 – cherryduck 2012-07-15 21:04:51

+0

步骤1:将参考替换为我想要显示的KML文件。这是我的核心问题。在按下按钮之前,KML文件的名称是未知的。 – cherryduck 2012-07-16 11:41:13

相关问题