Php 添加多个自定义标记/点
我有下面的代码,它工作得很好,但我不知道如何添加更多的标记/点。 有人能帮帮我吗,提前谢谢Php 添加多个自定义标记/点,php,javascript,google-maps-api-3,Php,Javascript,Google Maps Api 3,我有下面的代码,它工作得很好,但我不知道如何添加更多的标记/点。 有人能帮帮我吗,提前谢谢 <?php // Get the JSON - THIS CODE WILL CONVERT CITY,STATE INTO LAT/LNG. $url='http://maps.googleapis.com/maps/api/geocode/json?address=Chicago+IL&sensor=false'; $source = file_get_c
<?php
// Get the JSON - THIS CODE WILL CONVERT CITY,STATE INTO LAT/LNG.
$url='http://maps.googleapis.com/maps/api/geocode/json?address=Chicago+IL&sensor=false';
$source = file_get_contents($url);
$obj = json_decode($source);
$LATITUDE = $obj->results[0]->geometry->location->lat;
$LNG = $obj->results[0]->geometry->location->lng;
echo ('LAT: ').$LATITUDE;
echo ('<BR>LNG: ').$LNG;
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function load(){
var point = new google.maps.LatLng(<?php echo ($LATITUDE); ?>, <?php echo ($LNG); ?>);
var myMapOptions = {
zoom: 4,
center: point,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map"),myMapOptions);
var image = new google.maps.MarkerImage(
'marker-images/image.png',
new google.maps.Size(40,35),
new google.maps.Point(0,0),
new google.maps.Point(20,35)
);
var shadow = new google.maps.MarkerImage(
'marker-images/shadow.png',
new google.maps.Size(62,35),
new google.maps.Point(0,0),
new google.maps.Point(20,35)
);
var shape = {
coord: [27,0,30,1,32,2,34,3,35,4,36,5,38,6,39,7,39,8,39,9,39,10,38,11,37,12,33,13,34,14,34,15,33,16,32,17,31,18,27,19,28,20,28,21,27,22,26,23,22,25,23,26,24,27,24,28,24,29,24,30,24,31,24,32,23,33,22,34,17,34,16,33,15,32,15,31,14,30,14,29,15,28,15,27,16,26,17,25,13,23,12,22,11,21,11,20,12,19,8,18,7,17,6,16,5,15,5,14,6,13,2,12,1,11,0,10,0,9,0,8,0,7,1,6,3,5,4,4,5,3,7,2,9,1,12,0,27,0],
type: 'poly'
};
var marker = new google.maps.Marker({
draggable: true,
raiseOnDrag: false,
icon: image,
shadow: shadow,
shape: shape,
map: map,
position: point
});
}
</script>
</head>
<body onload="load()">
<div id="map" style="width:900px;height:500px;margin:40px auto;"></div>
</body>
</html>
函数加载(){
var point=newgoogle.maps.LatLng(,);
var myMapOptions={
缩放:4,
中心:点,,
mapTypeId:google.maps.mapTypeId.TERRAIN
};
var map=new google.maps.map(document.getElementById(“map”)、myMapOptions);
var image=new google.maps.MarkerImage(
'标记图像/image.png',
新谷歌地图尺寸(40,35),
新google.maps.Point(0,0),
新谷歌地图点(20,35)
);
var shadow=new google.maps.MarkerImage(
'标记图像/shadow.png',
新谷歌地图大小(62,35),
新google.maps.Point(0,0),
新谷歌地图点(20,35)
);
变量形状={
合作伙伴:[27,0,30,1,32,2,34,3,35,4,36,5,38,6,39,7,39,8,39,9,39,10,38,11,37,12,33,13,34,14,34,15,33,16,32,17,31,18,27,19,28,20,28,21,27,22,26,23,22,25,23,26,24,27,24,28,24,29,24,30,24,31,24,32,23,33,22,34,17,34,16,33,15,32,15,31,14,30,14,29,15,28,15,27,16,26,17,25,13,23,12,22,11,21,11,20,12,19,8,18,7,17,6,16,5,15,5,14,6,13,2,12,1,11,0,10,0,9,0,8,0,7,1,6,3,5,4,4,5,3,7,2,9,1,12,0,27,0],
类型:“poly”
};
var marker=new google.maps.marker({
真的,
理由:错,
图标:图像,
影子:影子,
形状:形状,
地图:地图,
位置:点
});
}
更新:以下是我也尝试过的(在:hansvedo的帮助下):
函数加载(){
var point=new google.maps.LatLng('LATITUDE','LNG');
var point2=new google.maps.LatLng('LATITUDE2','LNG2');
var myMapOptions={
缩放:5,
中心:点,,
mapTypeId:google.maps.mapTypeId.TERRAIN
};
var map=new google.maps.map(document.getElementById(“map”)、myMapOptions);
var image=new google.maps.MarkerImage(
'标记图像/image.png',
新谷歌地图尺寸(40,35),
新google.maps.Point(0,0),
新谷歌地图点(20,35)
);
var shadow=new google.maps.MarkerImage(
'标记图像/shadow.png',
新谷歌地图大小(62,35),
新google.maps.Point(0,0),
新谷歌地图点(20,35)
);
变量形状={
合作伙伴:[27,0,30,1,32,2,34,3,35,4,36,5,38,6,39,7,39,8,39,9,39,10,38,11,37,12,33,13,34,14,34,15,33,16,32,17,31,18,27,19,28,20,28,21,27,22,26,23,22,25,23,26,24,27,24,28,24,29,24,30,24,31,24,32,23,33,22,34,17,34,16,33,15,32,15,31,14,30,14,29,15,28,15,27,16,26,17,25,13,23,12,22,11,21,11,20,12,19,8,18,7,17,6,16,5,15,5,14,6,13,2,12,1,11,0,10,0,9,0,8,0,7,1,6,3,5,4,4,5,3,7,2,9,1,12,0,27,0],
类型:“poly”
};
//var marker=new google.maps.marker({
//真的,
//理由:错,
//图标:图像,
//影子:影子,
//形状:形状,
//地图:地图,
//位置:点
// });
var marker=new google.maps.marker({draggable:true,raiseOnDrag:false,icon:image,shadow:shadow,shape:shape,map:map,position:point});
var marker2=new google.maps.Marker({draggable:true,raiseOnDrag:false,icon:image,shadow:shadow,shape:shape,map:map,position:point2});
}
只需复制点和标记,并相应地递增即可
var point=new google.maps.LatLng('php echo($LATITUDE);','php echo($LNG);')
varpoint2=新的google.maps.LatLng(“echo($LATITUDE2);”,“echo($LNG2);”)
var marker=new google.maps.marker({
真的,
理由:错,
图标:图像,
影子:影子,
形状:形状,
地图:地图,
位置:点
}))
varmarker2=新的google.maps.Marker({
真的,
理由:错,
图标:图像,
影子:影子,
形状:形状,
地图:地图,
位置:点2
})只需复制点和标记,并相应地递增即可 var point=new google.maps.LatLng('php echo($LATITUDE);','php echo($LNG);') varpoint2=新的google.maps.LatLng(“echo($LATITUDE2);”,“echo($LNG2);”) var marker=new google.maps.marker({ 真的, 理由:错, 图标:图像, 影子:影子, 形状:形状, 地图:地图, 位置:点 })) varmarker2=新的google.maps.Marker({ 真的, 理由:错, 图标:图像, 影子:影子, 形状:形状, 地图:地图, 位置:点2
})我认为它只是在创建新的对象,比如代码<新的谷歌。地图。标记< /代码> @ BejayaPAAP我创建了一个客户标记,但是如何在同一个地图上添加更多的标记/点?我写的时候你必须创建那个对象的新实例。如果你不知道如何考虑阅读JavaScript。@ BejayaPAAP,我把它放在VAR标记中。我已经知道了吗?但我仍然无法使用多个lat/lng位置使其工作。请用您现在的信息更新您的问题。我认为这只是创建新的对象,如
新建google.maps.Marker
@BenjaminPaap我创建了一个客户标记,但如何在同一地图上添加更多标记/点?正如我所写,您必须创建新的ins如果你不知道如何考虑阅读JavaScript。@ BejayaPAAP我已经把它放在VAR标记中了,不是吗?但是我仍然不能用多个LAT/LNG位置来处理它。用你现在所做的来更新你的问题。我试过了,但是它不起作用,我更新了我的问题,这样你就可以看到我尝试了什么/如何尝试。n您能看到我做错了什么吗?非常感谢!这是正确的。您需要使用PHP来回送您的PHP变量。我只是添加了回送,以便确保PHP返回LNG、LNG2、LATITUDE和Latitude2的两个位置,但仍然不起作用:-(PHP返回,但标记除外)不是。那(jsfiddle)有帮助吗
<?php
// Get the JSON
$url='http://maps.googleapis.com/maps/api/geocode/json?address=Chicago+IL&sensor=false';
$source = file_get_contents($url);
$obj = json_decode($source);
$LATITUDE = $obj->results[0]->geometry->location->lat;
$LNG = $obj->results[0]->geometry->location->lng;
$url2='http://maps.googleapis.com/maps/api/geocode/json?address=Akron+OH&sensor=false';
$source2 = file_get_contents($url2);
$obj2 = json_decode($source2);
$LATITUDE2 = $obj2->results[0]->geometry->location->lat;
$LNG2 = $obj2->results[0]->geometry->location->lng;
echo ('LAT: ').$LATITUDE;
echo ('<BR>LNG: ').$LNG;
echo ('<BR><BR>');
echo ('LAT: ').$LATITUDE2;
echo ('<BR>LNG: ').$LNG2;
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function load(){
var point = new google.maps.LatLng('LATITUDE', 'LNG');
var point2 = new google.maps.LatLng('LATITUDE2', 'LNG2');
var myMapOptions = {
zoom: 5,
center: point,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map"),myMapOptions);
var image = new google.maps.MarkerImage(
'marker-images/image.png',
new google.maps.Size(40,35),
new google.maps.Point(0,0),
new google.maps.Point(20,35)
);
var shadow = new google.maps.MarkerImage(
'marker-images/shadow.png',
new google.maps.Size(62,35),
new google.maps.Point(0,0),
new google.maps.Point(20,35)
);
var shape = {
coord: [27,0,30,1,32,2,34,3,35,4,36,5,38,6,39,7,39,8,39,9,39,10,38,11,37,12,33,13,34,14,34,15,33,16,32,17,31,18,27,19,28,20,28,21,27,22,26,23,22,25,23,26,24,27,24,28,24,29,24,30,24,31,24,32,23,33,22,34,17,34,16,33,15,32,15,31,14,30,14,29,15,28,15,27,16,26,17,25,13,23,12,22,11,21,11,20,12,19,8,18,7,17,6,16,5,15,5,14,6,13,2,12,1,11,0,10,0,9,0,8,0,7,1,6,3,5,4,4,5,3,7,2,9,1,12,0,27,0],
type: 'poly'
};
// var marker = new google.maps.Marker({
// draggable: true,
// raiseOnDrag: false,
// icon: image,
// shadow: shadow,
// shape: shape,
// map: map,
// position: point
// });
var marker = new google.maps.Marker({ draggable: true, raiseOnDrag: false, icon: image, shadow: shadow, shape: shape, map: map, position: point });
var marker2 = new google.maps.Marker({ draggable: true, raiseOnDrag: false, icon: image, shadow: shadow, shape: shape, map: map, position: point2 });
}
</script>
</head>
<body onload="load()">
<div id="map" style="width:900px;height:500px;margin:40px auto;"></div>
</body>
</html>