Question

我想在我当前的多地点地图上使用goole地图地理位置。但它不会在我的地图上生效。邮件地图代码是：

<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBOnH8MfdUfZW9dNllQ1DEq_z9-ozwQHiU&sensor=false&extension=.js'></script> 
 
<script> 
    google.maps.event.addDomListener(window, 'load', init);
    var map;
    function init() {
        var mapOptions = {
            center: new google.maps.LatLng(43.656882,-79.386922),
            zoom: 13,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.DEFAULT,
            },
            disableDoubleClickZoom: true,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            },
            scaleControl: true,
            scrollwheel: true,
            panControl: true,
            streetViewControl: true,
            draggable : true,
            overviewMapControl: true,
            overviewMapControlOptions: {
                opened: false,
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        }
        var mapElement = document.getElementById('AdMe');
        var map = new google.maps.Map(mapElement, mapOptions);
        var locations = [
['Macdonald’s %25', 'Macdonald’s %25 off on BigMac', 'undefined', 'undefined', 'undefined', 43.66886917814133, -79.3859037030411, 'http://d6rd5g4tnbhqj.cloudfront.net/image?url=mcdonalds.com&t=2&s=1&h=12986831057547701509'],['Macdonald’s %25', 'Macdonald’s %25 off on BigMac', 'undefined', 'undefined', 'undefined', 43.6781997, -79.4434403, 'http://adme360.com/images/mc.jpg'],['Macdonald’s %25', 'Macdonald’s %25 off on BigMac', 'undefined', 'undefined', 'undefined', 43.6621909, -79.3837847, 'http://adme360.com/images/mc.jpg'],['Starbuck’s 10% off', 'Starbuck’s 10% off on all coffees', 'undefined', 'undefined', 'undefined', 43.6513611, -79.37464849999998, 'http://adme360.com/images/st.png'],['Starbuck’s 10% off', 'Starbuck’s 10% off on all coffees', 'undefined', 'undefined', 'undefined', 43.65248931511967, -79.37847889444276, 'http://adme360.com/images/st.png'],['Starbuck’s 10% off', 'Starbuck’s 10% off on all coffees', 'undefined', 'undefined', 'undefined', 43.64935669763818, -79.39423089814761, 'http://adme360.com/images/st.png'],['Starbuck’s 10% off', 'Starbuck’s 10% off on all coffees', 'undefined', 'undefined', 'undefined', 43.66065884580879, -79.39282609377898, 'http://adme360.com/images/st.png'],['Macdonald’s %25 off', 'Macdonald’s %25 off on BigMac', 'undefined', 'undefined', 'undefined', 43.6449908, -79.38586459999999, 'http://adme360.com/images/mc.jpg'],['TimHortons', 'Burger King’s Special Wednesday menu for $5', 'undefined', 'undefined', 'undefined', 43.646088891936415, -79.38253255952452, 'http://adme360.com/images/filtfet_timhortons_xhdpi.png'],['TimHortons', 'Burger King’s Special Wednesday menu for $5', 'undefined', 'undefined', 'undefined', 43.6468669, -79.38951880000002, 'http://adme360.com/images/filtfet_timhortons_xhdpi.png'],['TimHortons', 'Burger King’s Special Wednesday menu for $5', 'undefined', 'undefined', 'undefined', 43.66818683050016, -79.39773692698361, 'http://adme360.com/images/filtfet_timhortons_xhdpi.png']
        ];
        for (i = 0; i < locations.length; i++) {
			if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];}
			if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];}
			if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];}
           if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];}
           if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];}
            marker = new google.maps.Marker({
                icon: markericon,
                position: new google.maps.LatLng(locations[i][5], locations[i][6]),
                map: map,
                title: locations[i][0],
                desc: description,
                tel: telephone,
                email: email,
                web: web
            });
link = '';            bindInfoWindow(marker, map, locations[i][0], description, telephone, email, web, link);
     }
 function bindInfoWindow(marker, map, title, desc, telephone, email, web, link) {
      var infoWindowVisible = (function () {
              var currentlyVisible = false;
              return function (visible) {
                  if (visible !== undefined) {
                      currentlyVisible = visible;
                  }
                  return currentlyVisible;
               };
           }());
           iw = new google.maps.InfoWindow();
           google.maps.event.addListener(marker, 'click', function() {
               if (infoWindowVisible()) {
                   iw.close();
                   infoWindowVisible(false);
               } else {
                   var html= "<div style='color:#000;background-color:#fff;padding:5px;width:150px;'><h4>"+title+"</h4><p>"+desc+"<p></div>";
                   iw = new google.maps.InfoWindow({content:html});
                   iw.open(map,marker);
                   infoWindowVisible(true);
               }
        });
        google.maps.event.addListener(iw, 'closeclick', function () {
            infoWindowVisible(false);
        });
 }
}
</script>
<style>
    #AdMe {
        height:600px;
        width:1000px;
    }
    .gm-style-iw * {
        display: block;
        width: 100%;
    }
    .gm-style-iw h4, .gm-style-iw p {
        margin: 0;
        padding: 0;
    }
    .gm-style-iw a {
        color: #4272db;
    }
</style>

<div id='AdMe'></div>

强文

我想知道如何向此添加grolocation代码或如何使用geolocation创建多位置地图

Answer 1

我为addinf geolocation解决了这个问题，你需要将这段代码添加到你的javascripte代码

// Check if user support geo-location
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var geolocpoint = new google.maps.LatLng(latitude, longitude);

        var mapOptions = {
            zoom: 8,
            center: geolocpoint,
            mapTypeId: google.maps.MapTypeId.HYBRID
        }
        // Place a marker
        var geolocation = new google.maps.Marker({
            position: geolocpoint,
            map: map,
            title: 'Your geolocation',
            icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
        });
    });
}

如何在多位置地图上使用谷歌地图地理位置

1 个答案: