当前位置： 文江博客话题详情

如何更新谷歌地图中多个标记的位置

发布于 2024-11-09 17:51:52 字数 3469 浏览 0 评论 0原文

我正在使用谷歌地图 API 在地图上放置标记。标记的 GPS 坐标存储在 mySQL 数据库中。我已经能够创建标记，但是位置会不断变化，所以我想知道如何更新标记的位置，以便标记能够在地图上移动。到目前为止，这是我的代码：

<!DOCTYPE html>
<html>
<head><title>Map</title>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(36.9947935, -122.0622702);
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);



    var image = new google.maps.MarkerImage('busIcon.png',
        // The image size
        new google.maps.Size(44, 46),
        // The origin
        new google.maps.Point(0,0),
        // The anchor
        new google.maps.Point(22, 23));

    var shadow = new google.maps.MarkerImage('busIcon_shadow.png',
        new google.maps.Size(58, 46),
        new google.maps.Point(0,0),
        new google.maps.Point(22, 23)
    ); 

    var shape = {
        coord: [1, 1, 1, 45, 43, 45, 43 , 1],
        type: 'poly'
    };
    var markers = [

        <?php

        // Make a MySQL Connection
        mysql_connect("**********", "**********", "**********") or die(mysql_error());
        mysql_select_db("matsallen") or die(mysql_error());

        //Get number of rows
        $result = mysql_query
        (
            'SELECT COUNT(*) FROM busTrack AS count'
        )
        or die(mysql_error());

        $row = mysql_fetch_array( $result );

        $length = $row["COUNT(*)"];
        for ($count = 1; $count <= $length; $count++) {


            //Get data from MySQL database
            $result = mysql_query
            (
                'SELECT * FROM busTrack WHERE busID = '.$count
            )
            or die(mysql_error());




            // store the record of the "busTrack" table into $row
            $row = mysql_fetch_array( $result );

            // Echo the data into the array 'markers'

            $output = '{id: "Bus '.$row[busID].'", lat: '.$row[lat].', lng: '.$row[lon].'}';
            if ($count != $length) {
                $output = $output.',';
            };
            echo $output;
        };


        ?>

    ];

    for (index in markers) addMarker(map, markers[index]);



  function addMarker(map, data) {
    //create the markers
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.lat, data.lng),
        map: map,
        title: data.id,
        icon: image,
        shape: shape,
        shadow: shadow
    });

    //create the info windows
    var content = document.createElement("DIV");
    var title = document.createElement("DIV");
    title.innerHTML = data.id;
    content.appendChild(title);

    var infowindow = new google.maps.InfoWindow({
        content: content
    });

    // Open the infowindow on marker click
    google.maps.event.addListener(marker, "click", function() {
        infowindow.open(map, marker);
    });


  }
}



</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:75%; height:75%; margin:10%; allign:center;"></div>
</body>
</html>
原文

I am using google maps api to place markers on a map. The gps coordinates of the markers are stored in a mySQL database. I have been able to create the markers however the locations will constantly changing so I was wondering how I would go about updating the markers' locations so that the markers will move across the map. Here is my code so far:

<!DOCTYPE html>
<html>
<head><title>Map</title>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(36.9947935, -122.0622702);
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);



    var image = new google.maps.MarkerImage('busIcon.png',
        // The image size
        new google.maps.Size(44, 46),
        // The origin
        new google.maps.Point(0,0),
        // The anchor
        new google.maps.Point(22, 23));

    var shadow = new google.maps.MarkerImage('busIcon_shadow.png',
        new google.maps.Size(58, 46),
        new google.maps.Point(0,0),
        new google.maps.Point(22, 23)
    ); 

    var shape = {
        coord: [1, 1, 1, 45, 43, 45, 43 , 1],
        type: 'poly'
    };
    var markers = [

        <?php

        // Make a MySQL Connection
        mysql_connect("**********", "**********", "**********") or die(mysql_error());
        mysql_select_db("matsallen") or die(mysql_error());

        //Get number of rows
        $result = mysql_query
        (
            'SELECT COUNT(*) FROM busTrack AS count'
        )
        or die(mysql_error());

        $row = mysql_fetch_array( $result );

        $length = $row["COUNT(*)"];
        for ($count = 1; $count <= $length; $count++) {


            //Get data from MySQL database
            $result = mysql_query
            (
                'SELECT * FROM busTrack WHERE busID = '.$count
            )
            or die(mysql_error());




            // store the record of the "busTrack" table into $row
            $row = mysql_fetch_array( $result );

            // Echo the data into the array 'markers'

            $output = '{id: "Bus '.$row[busID].'", lat: '.$row[lat].', lng: '.$row[lon].'}';
            if ($count != $length) {
                $output = $output.',';
            };
            echo $output;
        };


        ?>

    ];

    for (index in markers) addMarker(map, markers[index]);



  function addMarker(map, data) {
    //create the markers
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.lat, data.lng),
        map: map,
        title: data.id,
        icon: image,
        shape: shape,
        shadow: shadow
    });

    //create the info windows
    var content = document.createElement("DIV");
    var title = document.createElement("DIV");
    title.innerHTML = data.id;
    content.appendChild(title);

    var infowindow = new google.maps.InfoWindow({
        content: content
    });

    // Open the infowindow on marker click
    google.maps.event.addListener(marker, "click", function() {
        infowindow.open(map, marker);
    });


  }
}



</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:75%; height:75%; margin:10%; allign:center;"></div>
</body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

浅忆流年 2024-11-16 17:51:52

要更改标记的位置，请在该标记上调用 setPosition()：

marker.setPosition(new google.maps.LatLng(newLat,newLng);

为此，您需要将所有标记保存在数组中。也许这样的事情会起作用：

var myMarkers = new Array();
for (index in markers) {
    myMarker[ markers[index]['id'] ] = addMarker(map, markers[index]);
}

function addMarker(map, data) {
    //create the markers
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.lat, data.lng),
        map: map,
        title: data.id,
        icon: image,
        shape: shape,
        shadow: shadow
    });

    //create the info windows
    var content = document.createElement("DIV");
    var title = document.createElement("DIV");
    title.innerHTML = data.id;
    content.appendChild(title);

    var infowindow = new google.maps.InfoWindow({
        content: content
    });

    // Open the infowindow on marker click
    google.maps.event.addListener(marker, "click", function() {
        infowindow.open(map, marker);
    });
    return marker;    
}

然后，当标记的位置需要改变时，希望你知道总线ID并且可以调用：

myMarkers['Bus 47'].setPosition(new google.maps.LatLng(newLat,newLng);

我没有测试上面的代码，所以可能会有小的语法错误或其他东西，但它应该给你这个想法。

To change the location of a marker, call setPosition() on that marker:

marker.setPosition(new google.maps.LatLng(newLat,newLng);

To do this, you will need to save all your markers in an array. Perhaps something like this would work:

var myMarkers = new Array();
for (index in markers) {
    myMarker[ markers[index]['id'] ] = addMarker(map, markers[index]);
}

function addMarker(map, data) {
    //create the markers
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.lat, data.lng),
        map: map,
        title: data.id,
        icon: image,
        shape: shape,
        shadow: shadow
    });

    //create the info windows
    var content = document.createElement("DIV");
    var title = document.createElement("DIV");
    title.innerHTML = data.id;
    content.appendChild(title);

    var infowindow = new google.maps.InfoWindow({
        content: content
    });

    // Open the infowindow on marker click
    google.maps.event.addListener(marker, "click", function() {
        infowindow.open(map, marker);
    });
    return marker;    
}

Then, when the position of a marker needs to change, hopefully you know the bus ID and can just call:

myMarkers['Bus 47'].setPosition(new google.maps.LatLng(newLat,newLng);

I didn't test the above code so there may be small syntax errors or something, but it should give you the idea.

回复 原文
~没有更多了~

关于作者

吾性傲以野

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

烙印

文章 0 评论 0

singlesman

文章 0 评论 0

给自己一个微笑

文章 0 评论 0

独孤求败

文章 0 评论 0

晨钟暮鼓

文章 0 评论 0

我是自愿种绣球花的

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文