Maison interface Web js tutoriel Comment connecter des marqueurs sur les compétences Google Maps_javascript

Comment connecter des marqueurs sur les compétences Google Maps_javascript

May 16, 2016 pm 04:22 PM
google 地图

Ceci est juste pour vous expliquer comment utiliser l'API Google Maps, et cela peut être considéré comme une introduction. Pour certaines raisons, Google est resté à l'écart de tout le monde.

Copier le code Le code est le suivant :

<!DOCTYPE html>
<html>
<tête>
<title>GéoLocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
    html, corps, #map-canvas {
        marge : 0;
        remplissage : 0 ;
        hauteur : 100%;
    >
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
    carte var;
    var poly;
    fonction initialiser() {
    var myLatlng = new google.maps.LatLng(31.1937077, 121.4158436);
    var emplacements = [
    ['test1, précision : 150m', 31.1937077, 121.4158436, 100],
    ['test2, précision : 150m', 31.2937077, 121.4158436, 100],
    ['test3, précision : 150m', 31.0937077, 121.2158436, 100],
    ['test4, précision : 150m', 31.3937077, 120.4158436, 100],
    ['test5, précision : 150m', 31.1637077, 120.4858436, 100],
    ['test6, précision : 150m', 31.1037077, 121.5158436, 100]
    ];
    var mapOptions = {
    zoom : 13,
    centre : myLatlng,
    mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
    // 线条设置
    var polyOptions = {
    StrokeColor : '#00ff00',    // 颜色
    StrokeOpacity : 1.0,    // 透明度
    StrokeWeight : 4    // 宽度
    >
    poly = nouveau google.maps.Polyline(polyOptions);
    poly.setMap(carte);    // 装载
    /* 循环标出所有坐标 */
    /*for(var i=0; i<locations.length; i ){
    var loc = [];
    loc.push(emplacements[i][1]);
    loc.push(emplacements[i][2]);
        var chemin = poly.getPath();    //获取线条的坐标
        path.push(new google.maps.LatLng(loc[0], loc[1]));    //为线条添加标记坐标
    //生成标记图标
    marqueur = nouveau google.maps.Marker({
        position : nouveau google.maps.LatLng(loc[0], loc[1]),
        carte : carte
        // icône : "https://maps.gstatic.com/mapfiles/markers/marker_green.png"
    });
    }*/
    marqueur var, i, cercle ;
    var iwarray = [];
    var infoWindow;
    var latlngbounds = new google.maps.LatLngBounds();
    var iconYellow = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/icons/yellow-dot.png");
    pour (i = 0; i < locations.length; i ) {
        var loc = [];
        loc.push(emplacements[i][1]);
        loc.push(emplacements[i][2]);
            var chemin = poly.getPath();    //获取线条的坐标
        path.push(new google.maps.LatLng(loc[0], loc[1]));
        var latlng = new google.maps.LatLng(locations[i][1], locations[i][2]);
        latlngbounds.extend(latlng);
    if (locations[i][0].indexOf("[Cached") == 0 || (locations[i][0].indexOf("[Multiple") == 0 && locations[i][0]. indexOf("[En cache") >= 0 )) {
            marqueur = nouveau google.maps.Marker({
                position: latlng,
                map: map,
                icon: iconYellow
            });
            var iw = '<div style="font-size: 12px;word-wrap:break-word;word-break:break-all;"><strong><font color="#FF0000">' + locations[i][0] + '<font></strong><div>';
        } else {
            marker = new google.maps.Marker({
                position: latlng,
                map: map
            });
            var iw = '<div style="font-size: 12px;word-wrap:break-word;word-break:break-all;"><strong><font color="#000000">' + locations[i][0] + '<font></strong><div>';
        }
        iwarray[i] = iw;
        google.maps.event.addListener(marker, 'mouseover', (function(marker,i){
                return function(){
                    infoWindow = new google.maps.InfoWindow({
                        content: iwarray[i],
                        maxWidth: 200,
                        pixelOffset: new google.maps.Size(0, 0)
                    });
                    infoWindow.open(map, marker);
                }
            })(marker,i));
        google.maps.event.addListener(marker, 'mouseout', function() {
            infoWindow.close();
        });
        circle = new google.maps.Circle({
            map: map,
            radius: locations[i][3],
            fillColor: '#0000AA',
            fillOpacity: 0.01,
            strokeWeight: 1,
            strokeColor: '#0000CC',
            strokeOpacity: 0.8
        });
        circle.bindTo('center', marker, 'position');
    }
    map.fitBounds(latlngbounds);
    var listener = google.maps.event.addListenerOnce(map, "idle", function()
        {
        var zoomLevel = parseInt(map.getZoom());
        if (zoomLevel > 13)
            map.setZoom(13);
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map-canvas"></div>
</corps>
</html>
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment faire de Google Maps la carte par défaut sur iPhone Comment faire de Google Maps la carte par défaut sur iPhone Apr 17, 2024 pm 07:34 PM

Comment faire de Google Maps la carte par défaut sur iPhone

Selon les rumeurs, Google Pixel 9 et Pixel 9 Pro bénéficieraient de Creative Assistant AI dès leur sortie Selon les rumeurs, Google Pixel 9 et Pixel 9 Pro bénéficieraient de Creative Assistant AI dès leur sortie Jun 22, 2024 am 10:50 AM

Selon les rumeurs, Google Pixel 9 et Pixel 9 Pro bénéficieraient de Creative Assistant AI dès leur sortie

Google Tensor G4 du Pixel 9 Pro XL est en retard sur Tensor G2 en Genshin Impact Google Tensor G4 du Pixel 9 Pro XL est en retard sur Tensor G2 en Genshin Impact Aug 24, 2024 am 06:43 AM

Google Tensor G4 du Pixel 9 Pro XL est en retard sur Tensor G2 en Genshin Impact

Google AI annonce Gemini 1.5 Pro et Gemma 2 pour les développeurs Google AI annonce Gemini 1.5 Pro et Gemma 2 pour les développeurs Jul 01, 2024 am 07:22 AM

Google AI annonce Gemini 1.5 Pro et Gemma 2 pour les développeurs

Le démontage de l'APK bêta de l'application Google révèle de nouvelles extensions à venir pour l'assistant Gemini AI Le démontage de l'APK bêta de l'application Google révèle de nouvelles extensions à venir pour l'assistant Gemini AI Jul 30, 2024 pm 01:06 PM

Le démontage de l'APK bêta de l'application Google révèle de nouvelles extensions à venir pour l'assistant Gemini AI

Les smartphones Google Pixel 9 ne seront pas lancés avec Android 15 malgré un engagement de mise à jour de sept ans Les smartphones Google Pixel 9 ne seront pas lancés avec Android 15 malgré un engagement de mise à jour de sept ans Aug 01, 2024 pm 02:56 PM

Les smartphones Google Pixel 9 ne seront pas lancés avec Android 15 malgré un engagement de mise à jour de sept ans

Le nouveau mode de bureau Google Pixel présenté dans une nouvelle vidéo comme alternative possible à Motorola Ready For et Samsung DeX Le nouveau mode de bureau Google Pixel présenté dans une nouvelle vidéo comme alternative possible à Motorola Ready For et Samsung DeX Aug 08, 2024 pm 03:05 PM

Le nouveau mode de bureau Google Pixel présenté dans une nouvelle vidéo comme alternative possible à Motorola Ready For et Samsung DeX

Google Pixel 9 Pro XL est testé avec le mode bureau Google Pixel 9 Pro XL est testé avec le mode bureau Aug 29, 2024 pm 01:09 PM

Google Pixel 9 Pro XL est testé avec le mode bureau

See all articles