Google Maps API（v3）添加/更新标记 [英] Google Maps API (v3) adding/updating markers
问题描述
我已经浏览了一些教程和问题，但我无法安静地理解发生了什么（或者案件，没有发生）。当用户点击链接时，我正在加载我的地图。这会将用户当前位置放置在中心的地图以及用户位置的标记。但是， if（navigation.location）之外的任何标记似乎都不会加载。以下是我目前的代码：
函数initialize（）{
//检查用户是否支持地理位置
if（navigator.geolocation）{
navigator.geolocation.getCurrentPosition（function（position）{
var point = new google.maps.LatLng（position.coords.latitude，position.coords.longitude） ;
var userLat = position.coords.latitude;
var userLong = position.coords.longitude;
var mapOptions = {
zoom：8，
center：point ，
mapTypeId：google.maps.MapTypeId.HYBRID
}
//初始化Google Maps API v3
var map = new google.maps.Map（document .getElementById（map），mapOptions）;
//放置一个标记
new google.maps.Marker（{
position：point，
map：地图，
标题：'您的GPS位置'
}）;
}）;
} else {
var userLat = 53;
var userLong = 0;
var mapOptions = {
zoom：8，
center：new google.maps.LatLng（userLat，userLong），
mapTypeId：google.maps.MapTypeId.HYBRID
}
//放置一个记号
new google.maps.Marker（{
位置：point，
map：map，
title：'Default Location'
}）;
//初始化Google Maps API v3
var map = new google.maps.Map（document.getElementById（map），mapOptions）;
}
<？
for（$ i = 0; $ i< sizeof（$ userLocations）; $ i ++）{
？>
var userLatLong = new google.maps.LatLng（< ;? echo $ userLocations [$ i] ['lat'];？> ;,< ;? echo $ userLocations [$ i] ['long']; ？>）;
new google.maps.Marker（{
position：userLatLong，
map：map，
title：< ;? echo $ userLocations [$ i] ['displayName'] 。'，'。$ userLocations [$ i] ['usertype'];？>
}）;
<？
}
？>
函数loadMapScript（）{
if（typeof（loaded）==undefined）{
$（＃showMap）。css（显示，无）;
$（＃showMapLink）。removeAttr（href）;
$（＃map）。css（height，600px）;
$（＃map）。css（width，600px）;
var script = document.createElement（script）;
script.type =text / javascript;
script.src =http://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=true&callback=initialize;
document.body.appendChild（script）;
loaded = true;
} else {
alert（Map already loaded！）;
当用户点击链接时调用loadMapScript（） 。 php for循环通过一个预先创建的数组与所有的信息进行循环。
我猜我没有完全理解它，就像我把它放在一起时一样：
var userLatLong = new google.maps.LatLng（53，0）;
new google.maps.Marker（{
position：userLatLong，
map：map，
title：Title
}）;
放入控制台（Google Chrome）中，我收到错误消息：
错误：属性< map> ;:无效值：[object HTMLDivElement]
但是，我不会在其他情况下发现任何错误。任何帮助将非常感激！ ：）
重组您的代码，如下所示：
var mapOptions = {
zoom：8，
mapTypeId：google.maps.MapTypeId.HYBRID
}
函数initialize（）{
//检查用户是否支持geo-位置
if（navigator.geolocation）{
navigator.geolocation.getCurrentPosition（function（position）{
makeMap（position.coords.latitude，position.coords.longitude，'Your GPS Location' ）;
}）;
} else {
makeMap（53，0，'DefaultLocation'）;
函数makeMap（lat，lng，text）{
var point = new google.maps.LatLng（lat，lng）;
mapOptions.center = point;
map = new google.maps.Map（document.getElementById（map），mapOptions）;
new google.maps.Marker（{
position：point，
map：map，
title：text
}）;
<？php for（$ i = 0; $ i< sizeof（$ userLocations）; $ i ++）：？>
var userLatLong = new google.maps.LatLng（< ;? echo $ userLocations [$ i] ['lat'];？> ;,< ;? echo $ userLocations [$ i] ['long']; ？>）;
new google.maps.Marker（{
position：userLatLong，
map：map，
title：< ;? echo $ userLocations [$ i] ['displayName'] 。'，'。$ userLocations [$ i] ['usertype'];？>
}）;
<？php endforeach？>
}
另外，考虑将$ userLocations引导到JavaScript变量中，如下所示： p>
var userLocations =<？php print json_encode（$ userLocations）？>
然后在JavaScript中执行for循环，而不是混合语言。
EDIT: It now works, but does not load if the user does not allow or have location-based services. See accepted answer comment for jsfiddle example.
I've looked through a few tutorials and questions but I can't quiet understand what's happening (or in this case, not happening). I'm loading my map when the user clicks a link. This loads the map with the users current location in the center, and a marker at the users location. However, any markers outside of the if (navigation.location) don't seem to load. Below is my current code:
function initialize() {
// Check if user support geo-location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var userLat = position.coords.latitude;
var userLong = position.coords.longitude;
var mapOptions = {
zoom: 8,
center: point,
mapTypeId: google.maps.MapTypeId.HYBRID
}
// Initialize the Google Maps API v3
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
// Place a marker
new google.maps.Marker({
position: point,
map: map,
title: 'Your GPS Location'
});
});
} else {
var userLat = 53;
var userLong = 0;
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(userLat, userLong),
mapTypeId: google.maps.MapTypeId.HYBRID
}
// Place a marker
new google.maps.Marker({
position: point,
map: map,
title: 'Default Location'
});
// Initialize the Google Maps API v3
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
<?
for ($i = 0; $i < sizeof($userLocations); $i++) {
?>
var userLatLong = new google.maps.LatLng(<? echo $userLocations[$i]['lat']; ?>, <? echo $userLocations[$i]['long']; ?>);
new google.maps.Marker({
position: userLatLong,
map: map,
title:"<? echo $userLocations[$i]['displayName'] . ', ' . $userLocations[$i]['usertype']; ?>"
});
<?
}
?>
}
function loadMapScript() {
if (typeof(loaded) == "undefined") {
$("#showMap").css("display", "none");
$("#showMapLink").removeAttr("href");
$("#map").css("height", "600px");
$("#map").css("width", "600px");
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=true&callback=initialize";
document.body.appendChild(script);
loaded = true;
} else {
alert("Map already loaded!");
}
}
loadMapScript() is called when the user clicks a link. The php for loop loops through a pre-created array with all the information.
I'm guessing I don't fully understand it, as when if I put:
var userLatLong = new google.maps.LatLng(53, 0);
new google.maps.Marker({
position: userLatLong,
map: map,
title:"Title"
});
into the console (Google Chrome), I get the error:
Error: Invalid value for property <map>: [object HTMLDivElement]
I don't, however, get any errors otherwise. Any help would be much appreciated! :)
navigator.geolocation.getCurrentPosition() is asynchronous.
Reorganize your code like this:
var mapOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.HYBRID
}
function initialize() {
// Check if user support geo-location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
makeMap(position.coords.latitude, position.coords.longitude, 'Your GPS Location');
});
} else {
makeMap(53, 0, 'DefaultLocation');
}
}
function makeMap(lat, lng, text) {
var point = new google.maps.LatLng(lat, lng);
mapOptions.center = point;
map = new google.maps.Map(document.getElementById("map"), mapOptions);
new google.maps.Marker({
position: point,
map: map,
title: text
});
<?php for ($i = 0; $i < sizeof($userLocations); $i++): ?>
var userLatLong = new google.maps.LatLng(<? echo $userLocations[$i]['lat']; ?>, <? echo $userLocations[$i]['long']; ?>);
new google.maps.Marker({
position: userLatLong,
map: map,
title:"<? echo $userLocations[$i]['displayName'] . ', ' . $userLocations[$i]['usertype']; ?>"
});
<?php endforeach ?>
}
Also, consider bootstraping the $userLocations into a JavaScript variable like this:
var userLocations = <?php print json_encode($userLocations) ?>;
Then execute your for loop in JavaScript, instead of mixing languages.
这篇关于Google Maps API（v3）添加/更新标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
