谷歌 Javascript 地图 v3

Posted 2023-02-23

【中文标题】谷歌 Javascript 地图 v3

【英文标题】：Google Javascript Map v3

【发布时间】：2015-04-24 14:09:10

【问题描述】：

我正在开发带有标记和地理位置的地图，在 chrome 上一切正常，但在 Safari (OSX 10.10.3) 上无法使用地理位置。

甚至是谷歌工作的示例页面

链接：https://developers.google.com/maps/documentation/javascript/examples/map-geolocation

在 safari 上无法使用 chrome。

我将这个库包含在我的代码中。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&sensor=true"></script>

谢谢

【问题讨论】：

向我们展示您的实际 javascript，演示您如何加载地图、标记等

【参考方案1】：

这是我的代码。

页面测试链接：http://francescozito.eu/app/test

他的行为很奇怪

// definisco l'oggetto che rappresenta il centro della mappa, a cui passo le coordinate (variabili php)
var GOOGLE_PALERMO = new google.maps.LatLng(38.133725, 13.349735);
var CAFE_CARTARI = new google.maps.LatLng(38.11694730000001, 13.365525899999966);
var BICI_CANNATELLA = new google.maps.LatLng(38.1175329, 13.351235900000006);
var AMAZZONIA = new google.maps.LatLng(38.125611, 13.351576099999988);
var ASD_I_CICLOPI = new google.maps.LatLng(38.1329123, 13.34007650000001);
var EDICOLA_E = new google.maps.LatLng(38.1380411, 13.337050500000032);
var ITALSUISSE = new google.maps.LatLng(38.1382892, 13.336938700000019);
var I_LIBRI_DI_ANDREA = new google.maps.LatLng(38.1392185, 13.347450900000013);
var MAIL_BOX = new google.maps.LatLng(38.1406649, 13.350653800000032);
var LEIMA = new google.maps.LatLng(38.1442414, 13.359304500000007);

var centro = GOOGLE_PALERMO;

// definisco l'array dei punti di interesse, a cui passo la stringa costruita in Php
var puntiinteresse = [ CAFE_CARTARI, BICI_CANNATELLA, AMAZZONIA, ASD_I_CICLOPI, EDICOLA_E, ITALSUISSE, I_LIBRI_DI_ANDREA, MAIL_BOX, LEIMA ];

// definisco l'array delle descrizioni, a cui passo la stringa costruita in Php
var descrizioni = ["CAFE' CARTARI","BICI CANNATELLA", "AMAZZONIA", "ASD I CICLOPI", "EDICOLA E... di Mercurio Vito", "ITALSUISSE di S.G. D'Errico", "I LIBRI DI ANDREA", "MAIL BOX", "LEIMA Editore" ];
var vie = ["Via dei Cartari, 1","Via Papireto, 14/a", "Via Principe di Villafranca 44a", "Via Daldone 3", "Via Principe di Paternò 126", "Via Principe di Paternò 105", "Via Mario Rutelli 24", "Via Autonomia Siciliana 28", "Via Altavilla 55"];

var red = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';
var blue = 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png';
var green = 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png';

var markers = [];
var infoWindows = [];
var currentInfoWindow;
var j = 0;

var map;
var map_percorsi;


/* Percorsi */
  var percorso = [ GOOGLE_PALERMO, CAFE_CARTARI, BICI_CANNATELLA, AMAZZONIA, ASD_I_CICLOPI];
  var percorso2 = [ EDICOLA_E, ITALSUISSE, I_LIBRI_DI_ANDREA, MAIL_BOX, LEIMA ];
  var percorso3 = [ ASD_I_CICLOPI, EDICOLA_E ];

  var percorsi_group = [ percorso, percorso2, percorso3 ];
  var percorsi_color = ["#f00", "#000", "#ff0"];

  var poly = [];

  /*****/

function initialize() 


  if ( navigator.geolocation ) 
  
    // Find the users current position.  
    // Cache the location for 5 minutes, timeout after 6 seconds
    navigator.geolocation.getCurrentPosition(success, fail, maximumAge: 500000, enableHighAccuracy:true, timeout: 6000);
   else 
    
      drawMap(centro);  // No geolocation support, show default map
    


function success(pos) 

  // Location found, show map with these coordinates
  drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
  //drawMap(centro); 


function fail(error) 

  drawMap(centro);
  // Failed to find location, show default map


function drawMap(latlng) 

    var mapOptions = 
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: latlng
  ;

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  map_percorsi = new google.maps.Map(document.getElementById('map-percorsi'), mapOptions);

  disegna_percorsi();




function geocalizzami()

  if ( navigator.geolocation ) 
  
    navigator.geolocation.getCurrentPosition(ti_ho_geolocalizzato, nessuna_geolocalizzazione, maximumAge: 500000, enableHighAccuracy:true, timeout: 6000);
   else 
    

    


function ti_ho_geolocalizzato(pos) 

  alert(pos.coords.latitude+" -- "+pos.coords.longitude);
  map.panTo(pos.coords.latitude, pos.coords.longitude);


function nessuna_geolocalizzazione(error) 

  alert("Geolocalizzazione non possibile");


function disegna_percorsi()

  for(var p = 0; p < percorsi_group.length; p++)
  
    poly[p] = new google.maps.Polyline(
      path: percorsi_group[p],
      geodesic: true,
      strokeColor: percorsi_color[p],
      strokeOpacity: 1,
      strokeWeight: 2
    );

    poly[p].setMap(map_percorsi);
  


function drop() 

  for (var i = 0; i < puntiinteresse.length; i++) 
  
    setTimeout(function() 
    
      addMarker();
    , i * 300);
  


function addMarker() 


  var marker = new google.maps.Marker(
    position: puntiinteresse[j],
    map: map,
    icon: blue,
    draggable: false,
    title: descrizioni[j],
    animation: google.maps.Animation.DROP,
    infoWindowIndex : j //<---Thats the extra attribute
  );


  var content = '<span><h5 style="color:blue">Network Ospitalit&agrave; Ciclisti</h5><h4 style="color:black">' + descrizioni[j] + '</h4><h6 style="color:black">' + vie[j] + '</h6></span></div>';
  var infoWindow = new google.maps.InfoWindow(
      content : content
  );

  google.maps.event.addListener(marker, 'click', 
      function(event)
      
          if (currentInfoWindow != null)  
              currentInfoWindow.close(); 
           

          map.panTo(event.latLng);
          //map.setZoom(5);
          infoWindows[this.infoWindowIndex].open(map, this);
          currentInfoWindow = infoWindows[this.infoWindowIndex];
      
  );

  infoWindows.push(infoWindow);
  markers.push(marker);
  j++;