使用数据库中的多个纬度和经度值在 Google 地图上标记路线
Posted
技术标签:
【中文标题】使用数据库中的多个纬度和经度值在 Google 地图上标记路线【英文标题】：Marking route on Google map with multiple latitude and longitude values from database 【发布时间】：2012-11-25 11:06:51 【问题描述】：我编写了一个 php 和 javascript 代码，它将从数据库中检索纬度和经度信息，并根据适当的位置在谷歌地图上放置标记（使用纬度和经度值）。这很好用。
我需要加入这些标记并在地图上绘制路线。怎么做。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css">
body font: normal 10pt Helvetica, Arial;
#map width: 350px; height: 300px; border: 0px; padding: 0px;
</style>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info)
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker(
position: pt,
icon: icon,
map: map
);
var popup = new google.maps.InfoWindow(
content: info,
maxWidth: 300
);
google.maps.event.addListener(marker, "click", function()
if (currentPopup != null)
currentPopup.close();
currentPopup = null;
popup.open(map, marker);
currentPopup = popup;
);
google.maps.event.addListener(popup, "closeclick", function()
map.panTo(center);
currentPopup = null;
);
function initMap()
map = new google.maps.Map(document.getElementById("map"),
center: new google.maps.LatLng(0, 0),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions:
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
,
navigationControl: true,
navigationControlOptions:
style: google.maps.NavigationControlStyle.SMALL
);
$.getJSON('googlescript.php', function(items)
for (var i = 0; i < items.length; i++)
(function(item)
addMarker(item.lat, item.long, '<b>' + item.name + '</b><br />' + item.desc);
)(items[i]);
);
center = bounds.getCenter();
map.fitBounds(bounds);
</script>
</head>
<body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
<div id="map"></div>
</html>
【问题讨论】：
你想用直线连接标记，还是用行车路线连接？ @duncan 我只想用直线连接起来 【参考方案1】：我想你寻找折线对象，你可以看到如何在google maps documentation中使用
如果您有一个更大的项目，我可以建议您使用 gmap2 和 .kml 文件。但是您应该能够使用 google 文档轻松实现您的目标..
【讨论】：
我会尝试使用折线。是否可以使用折线从数据库中检索纬度和经度值 Javascript 在客户端工作，所以没有。但是您可以编写一个 PHP 脚本，在服务器上创建一个 .kml 文件，其中包含您的标记、标记图片、纬度和经度以及您想要显示的所有其他数据，例如在工具提示中。之后，您可以通过 js 请求 kml 文件（您必须在 google maps doc 中查找 kml），它会自动显示所有标记。您也可以在 kml 中使用折线。还有其他几种方法可以做到这一点，但我个人发现这是与谷歌地图一起使用的一个很好的解决方案，尤其是与许多标记一起使用。你也可以创建一个 json。【参考方案2】：您需要了解POLYLINE ARRAYS 才能完成用一条线连接所有标记。文档解释得很好。
但是，折线数组使用 javascript 数组，因此如果您要从数据库中获取 lat lng 值，那么您应该寻找某种方法将从数据库中获取的 lat lng 数组传递到JavaScript 函数。网站上已经有一篇文章展示了如何工作 Using PHP/mysql with Google Maps 。查看文章并学习使用折线数组，这应该会对您有所帮助。
【讨论】：
【参考方案3】：将您的 JSON 返回函数修改为：
$.getJSON('googlescript.php', function(items)
var routePoints = [];
for (var i = 0; i < items.length; i++)
(function(item)
addMarker(item.lat, item.long, '<b>' + item.name + '</b><br />' + item.desc);
)(items[i]);
routePoints.push(new google.maps.LatLng(items[i].lat,items[i].long));
var route= new google.maps.Polyline(
path: routePoints,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
);
route.setMap(map);
);
【讨论】：
以上是关于使用数据库中的多个纬度和经度值在 Google 地图上标记路线的主要内容，如果未能解决你的问题，请参考以下文章
如何从 Wordpress 中的 Google Maps ACF 字段中删除纬度和经度？