谷歌地图APi3:折线段没有出现在地图上
问题描述:
Goog day!谷歌地图APi3:折线段没有出现在地图上
我有一个非常简单的谷歌地图的实现,它允许我的用户在地图画布的任何地方绘制多段线。
当重新开始时,折线段在地图上可见,折线存储在使用PHP的mySql数据库中。
//当编辑与折线的地图:
如果用户决定改变折线,我从数据库装载以前的折线,这是对用户可见。当他们点击按钮绘制多段线时,它将清除地图上的前一个多段线,并允许它们重新开始,但是,一旦它们开始在地图上点击,新的多段线段在地图上不可见,但是正确保存到数据库。
这里是我到目前为止已经完成:
var map;
var polyline = null;
var polylinePath = null;
// HERE I INITIALIZE MY MAP ETC ETC ...
// IN EDIT MODE I ALLOW THE FOLLOWING FUNCTION TO BE CALLED FIRST TO LOAD ANY EXISITNG POLYLINES FOR THE USER
// THIS WORKS FINE, IT SHOWS THE PREVIOUS POLYLINE ON THE MAP.
function loadBasePolylines($mapGuid)
{
var loadUrl = 'classes/Ajax_System.php';
$.getJSON(loadUrl+"?action=loadMapPolylines&mapId="+mapGuid, function(json) {
if(json[0]['hasPolylines'] == 'yes'){
var polylinesArray = [];
var prepath = polylinePath;
if(prepath){
prepath.setMap(null);
}
var points = json[0].Points;
for (i=0; i<points.length; i++) {
polylinesArray.push(new google.maps.LatLng(points[i].lat,points[i].lon));
bounds.extend(new google.maps.LatLng(points[i].lat,points[i].lon));
}
polyline = new google.maps.Polyline({
strokeColor: json[0]['lineColour'],
strokeOpacity: 0.5,
strokeWeight: json[0]['lineThickness'],
clickable: false,
path: polylinesArray
});
polylinePath = polyline.getPath();
polyline.setMap(map);
map.fitBounds(bounds);
}
});
}
// WHEN THE USER PRESS THE "DRAW PATH" BUTTON, THE FOLLOWING FUNCTION IN QUESTION IS CALLED:
function startPolyline()
{
if(polyline != null){
var answer = confirm("This will clear the current polyline from the map. Are you sure you want to continue?");
if(answer){
polyline.setMap(null);
if (tempMarkers) {
for (i in tempMarkers) {
tempMarkers[i].setMap(null);
}
tempMarkers.length = 0;
}
} else {
return;
}
}
var polyOptions = {
strokeColor: polylineColor,
strokeOpacity: polyLineOpacity,
strokeWeight: polyLineWidth,
clickable: false
}
polyline = new google.maps.Polyline(polyOptions);
polyline.setMap(map);
// Add a listener for the click event
google.maps.event.addListener(map, 'click', addPolylinePoint);
}
function addPolylinePoint(event)
{
var path = polyline.getPath();
path.push(event.latLng);
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
icon: '<?php echo URL; ?>public/mapIcons/mm_20_red.png',
map: map
});
tempMarkers.push(marker);
}
我试过到目前为止:
- 检查颜色代码是在正确的格式:是
- 检查纬度Lon order and values:是的
任何帮助将真诚地被赞赏。先谢谢你。
答
哇,我已经解决了消失折线问题,通过我的问题重读。希望这将有助于有人出来第一天:
在我的代码,我从数据库中加载的折线:
function loadBasePolylines($mapGuid)
{
.
.
.
polyline = new google.maps.Polyline({
strokeColor: json[0]['lineColour'],
strokeOpacity: 0.5,
strokeWeight: json[0]['lineThickness'],
clickable: false,
path: polylinesArray
});
}
我的行程不透明度设置为0.5(等于50%)的权利......
然而,正当我在...
function startPolyline()
var polyOptions = {
strokeColor: polylineColor,
strokeOpacity: polyLineOpacity,
strokeWeight: polyLineWidth,
clickable: false
}
开始折线工具......我不透明度设置为所谓的polyLineOpacity未设定变量。
一旦我加入了全局变量和...
function loadBasePolylines($mapGuid)
{
.
.
.
strokeOpacity = json[0]['lineOpacity'] * 100;
polyline = new google.maps.Polyline({
strokeColor: json[0]['lineColour'],
strokeOpacity: strokeOpacity,
strokeWeight: json[0]['lineThickness'],
clickable: false,
path: polylinesArray
});
}
应用的负载值...用正确的不透明度的折线再次显示正确!
我把这个开发者叫做脑冻结。 Tkx!
答
尝试重新开始在地图变量在startPolyline功能
map = new google.maps.Map(document.getElementById('id of your map')):
谢谢,但是,重新启动地图变量会返回灰色地图区域,并且不会听取点击事件。再次设置地图选项也无济于事。 – ALPHp