


Comment connecter des marqueurs sur les compétences Google Maps_javascript
May 16, 2016 pm 04:22 PMCeci 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.
<!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>

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

Sujets chauds

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

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

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

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
