Google使用地理位置按钮映射多个标记 [英] Google maps multiple markers with geolocation button
本文介绍了Google使用地理位置按钮映射多个标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在Google地图中同时使用多个标记（地点）和地理位置。
如果我可以在此行使用 resultx 变量，那么一切都会好起来的。
center：new google.maps.LatLng（ '42'，'26'，13），
而非' 42'，'26'
我试过resultx，'resultx'，'+ resultx + '..但是它不起作用。
那么你的建议是什么？
---- -HTML ----
< div id =map-canvas>< / div>
< button onclick =getLocation（）>获取您的位置< / button>
----- JAVASCRIPT ----
< script>
var x = document.getElementById（map-canvas）;
函数getLocation（）{
if（navigator.geolocation）{
navigator.geolocation.getCurrentPosition（showPosition）;
} else {
x.innerHTML =此浏览器不支持地理定位。;
函数showPosition（position）{
var latx =''+ position.coords.latitude +'';
var lonx =''+ position.coords.longitude +'';
var resultx = latx +'，'+ lonx;
var locations = [
['Helooo'，40，30，0]，['Helooo'，41.04564,28.97862，1]，];
$ b var map = new google.maps.Map（document.getElementById（'map-canvas'），{
zoom：5，
scrollwheel：false，
center：new google.maps.LatLng（'42'，'26'，13），
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
var infowindow = new google.maps.InfoWindow（）;
var marker，i;
（i = 0; i< locations.length; i ++）{
marker = new google.maps.Marker（{
position：new google.maps.LatLng （位置[i] [1]，位置[i] [2]），
disableAutoPan：true，
map：map
}）;
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function（）{
infowindow.setContent（locations [i ] [b]）;
infowindow.open（map，marker）;
}
}）（marker，i））;
}
}
< / script>
解决方案
要使用地理位置函数的结果， google.maps.LatLng（或google.maps.LatLngLiteral）从所需的经度和纬度，然后用它来居中您的地图。
function showPosition（position）{
var latx = position.coords.latitude;
var lonx = position.coords.longitude;
var resultx = new google.maps.LatLng（latx，lonx）;
var map = new google.maps.Map（document.getElementById（'map-canvas'），{
zoom：5，
scrollwheel：false，
center：resultx，
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
代码段：
var x = document.getElementById（map-canvas）; function getLocation（）{if（navigator.geolocation）{navigator.geolocation .getCurrentPosition（showPosition）; } else {x.innerHTML =此浏览器不支持地理定位。; }} function showPosition（position）{var latx = position.coords.latitude; var lonx = position.coords.longitude; var resultx = new google.maps.LatLng（latx，lonx）; var locations = [['Helooo'，40，30，0]，['Helooo'，41.04564，28.97862，1]，]; var map = new google.maps.Map（document.getElementById（'map-canvas'），{zoom：5，scrollwheel：false，center：resultx，mapTypeId：google.maps.MapTypeId.ROADMAP}）; var infowindow = new google.maps.InfoWindow（）; var marker，i; （位置[i] [1]，位置[i] [2] ），disableAutoPan：true，map：map}）; google.maps.event.addListener（marker，'click'，（function（marker，i）{return function（）{infowindow.setContent（locations [i] [0]）; infowindow.open（map，marker）;} }）（marker，i））; }}
html，body，＃map-canvas {height ：100％;宽度：100％; margin：0px; < script src =https：//
I want to use both of multiple markers (places) and geolocation in google maps.
Everything will be fine , if i can use resultx variable at this row
center: new google.maps.LatLng('42','26',13),
instead of '42','26'
i tried resultx,'resultx','+resultx+'.. such as but it doesnt work.
So what is your advice?
-----HTML----
<div id="map-canvas"></div>
<button onclick="getLocation()">Get your location</button>
-----JAVASCRIPT----
<script>
var x = document.getElementById("map-canvas");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
var latx=''+position.coords.latitude+'';
var lonx=''+position.coords.longitude+'';
var resultx=latx+','+lonx;
var locations = [
['Helooo',40, 30 ,0] , ['Helooo',41.04564,28.97862 ,1] , ];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 5,
scrollwheel: false,
center: new google.maps.LatLng('42','26',13),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
disableAutoPan: true,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
</script>
解决方案
To use the result from the geolocation function, create a google.maps.LatLng (or a google.maps.LatLngLiteral) from the desired latitude and longitude, then use that to center your map.
function showPosition(position) {
var latx=position.coords.latitude;
var lonx=position.coords.longitude;
var resultx=new google.maps.LatLng(latx,lonx);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 5,
scrollwheel: false,
center: resultx,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
code snippet:
var x = document.getElementById("map-canvas");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
var latx = position.coords.latitude;
var lonx = position.coords.longitude;
var resultx = new google.maps.LatLng(latx, lonx);
var locations = [
['Helooo', 40, 30, 0],
['Helooo', 41.04564, 28.97862, 1],
];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 5,
scrollwheel: false,
center: resultx,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
disableAutoPan: true,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<button onclick="getLocation()">Get your location</button>
<div id="map-canvas"></div>
这篇关于Google使用地理位置按钮映射多个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
