Javascript 如何在google maps api v3中使用地图url查询？
我有一个html页面（www.mywebsite/index），上面有javascript谷歌地图api实现。所以我很感兴趣的是，是否有任何方法可以处理像谷歌地图这样的查询，但在我的页面上，不仅有地图，还有其他元素。因此，我正在寻找一些方法来继续在我的页面上进行查询，也许可以通过php在页面加载之前将这些信息直接提供给map 现在索引的代码如下所示：Javascript 如何在google maps api v3中使用地图url查询？,javascript,url,google-maps-api-3,google-maps-urls,Javascript,Url,Google Maps Api 3,Google Maps Urls,我有一个html页面（www.mywebsite/index），上面有javascript谷歌地图api实现。所以我很感兴趣的是，是否有任何方法可以处理像谷歌地图这样的查询，但在我的页面上，不仅有地图，还有其他元素。因此，我正在寻找一些方法来继续在我的页面上进行查询，也许可以通过php在页面加载之前将这些信息直接提供给map 现在索引的代码如下所示： <!DOCTYPE html> <html lang="en"> <head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=" width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
#map{
height:900px;
}
#html,body{
height: 100%;
margin: 0;
padding: 0;}
#floating-panel {
position: absolute;
top: 10px;
left: 8%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
<style>
#map{
height:900px;
}
#html,body{
height: 100%;
margin: 0;
padding: 0;}
#floating-panel {
position: absolute;
top: 10px;
left: 8%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
<script>
var map;
//empty arrays for filling with active markers and polylines
var markers = [];
var polys =[];
var oneP = [
{lat:48.618871,lng: 22.297566},
{lat:48.618186,lng: 22.298707},
{lat:48.617063,lng: 22.299621},
{lat:48.612928,lng: 22.302788}
];
// Array of markers
var zups = [
{coords:{lat:48.618776,lng: 22.297590 },title:'<h2>Place 1 </h2><br></br><h3> 1, 2, 3, 12, 20 </h3>'},
{coords:{lat:48.611788,lng: 22.303622 },title:'<h2>Place 2 </h2><br></br><h3> 1,9, 10,20,21 </h3>'},
{coords:{lat:48.608147,lng: 22.306452 },title:'<h2>Place 3 </h2><br></br><h3> 1,9,10,20,21 </h3>'},
{coords:{lat:48.604397,lng: 22.309360 },title:'<h2> Place 4 </h2><br></br><h3> 1,9,10,20,21 </h3>'},
{coords:{lat:48.599380,lng: 22.313260 },title:'<h2>Place 5</h2><br></br><h3> 1,9,10,20,21 </h3>'},
{coords:{lat:48.591408,lng: 22.319969 },title:'<h2>Place 6 </h2><br></br><h3> 1 </h3>'}
];
function initMap(){
// Map options
var options = {
zoom:13,
center:{lat:48.620837,lng:22.287864}
}
// New map
map = new google.maps.Map(document.getElementById('map'), options);
}
function addPoly(coords){
Poly = new google.maps.Polyline({
path:coords,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
polys.push(Poly);
}
function SetPolyOnMap(map){
for (var i = 0; i < polys.length; i++)
{
polys[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearPoly() {
SetPolyOnMap(null);
}
// Shows any markers currently in the array.
function showPoly() {
SetPolyOnMap(map);
}
// Deletes all markers in the array by removing references to them.
function deletePoly() {
clearPoly();
polys = [];
}
// Add Marker Function
function addMarker(props){
var marker = new google.maps.Marker({
position:props.coords,
map:map,
title:props.title
});
// Check for customicon
// if(props.iconImage){
// Set icon image
// marker.setIcon(props.iconImage);
// }
// Check content
if(props.title){
var infoWindow = new google.maps.InfoWindow({
content:props.title
});
marker.addListener('click', function(){
infoWindow.open(map, marker);
});
}
markers.push(marker);
}
function addMarkersIn(a,b){
for(var i=a-1;i<b;i++){
addMarker(zups[i]);}
}
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
}
// Shows any markers currently in the array.
function showMarkers() {
setMapOnAll(map);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
function one(){
deleteMarkers();
deletePoly();
addMarkersIn(1,6);
addPoly(oneP);
showPoly();
showMarkers();
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap">
</script>
</head>
<body>
<div id="floating-panel">
<input onclick="one();" type=button value="1">
</div>
<div id="map"></div>
</body>
</html>
#地图{
高度：900px；
}
#html，正文{
身高：100%；
保证金：0；
填充：0；}
#浮动面板{
位置：绝对位置；
顶部：10px；
左：8%；
z指数：5；
背景色：#fff；
填充物：5px；
边框：1px实心#999；
文本对齐：居中；
字体系列：“Roboto”，“sans-serif”；
线高：30px；
左侧填充：10px；
}
#地图{
高度：900px；
}
#html，正文{
身高：100%；
保证金：0；
填充：0；}
#浮动面板{
位置：绝对位置；
顶部：10px；
左：8%；
z指数：5；
背景色：#fff；
填充物：5px；
边框：1px实心#999；
文本对齐：居中；
字体系列：“Roboto”，“sans-serif”；
线高：30px；
左侧填充：10px；
}
var映射；
//用于填充活动标记和多段线的空数组
var标记=[]；
var polys=[]；
var oneP=[
{lat:48.618871，lng:22.297566}，
{lat:48.618186，lng:22.298707}，
{lat:48.617063，lng:22.299621}，
{lat:48.612928，lng:22.302788}
];
//标记数组
var zups=[
{coords:{lat:48.618776，lng:22.297590}，标题：'Place 1
1,2,3,12,20'}，
{coords:{lat:48.611788，lng:22.303622}，标题：'Place 2
1,9,10,20,21'}，
{coords:{lat:48.608147，lng:22.306452}，标题：'Place 3
1,9,10,20,21'}，
{coords:{lat:48.604397，lng:22.309360}，标题：'Place 4
1,9,10,20,21'}，
{coords:{lat:48.599380，lng:22.313260}，标题：'Place 5
1,9,10,20,21'}，
{coords:{lat:48.591408，lng:22.319969}，标题：'Place 6
1'}
];
函数initMap（）{
//地图选项
变量选项={
缩放：13，
中心：{lat:48.620837，lng:22.287864}
}
//新地图
map=new google.maps.map（document.getElementById（'map'），选项）；
}
函数addPoly（coords）{
Poly=新的google.maps.Polyline({
路径：coords，
strokeColor:“#FF0000”，
笔划不透明度：1.0，
冲程重量：2
});
多边形推送（Poly）；
}
函数设置映射（map）{
对于（变量i=0；i function getQueryParams() {
// get the param 'query from url'
var query = location.search.split('query=')[1];
// if url has any parameter called 'query'
if (query){
// get the value of query and split it
var coords = query.split(',');
// separate lat and lng and return
return {hasCoords: true,coords:{lat: parseFloat(coords[0]), lng: parseFloat(coords[1])}};
} else {
// if url do not have any parameter called 'query'
return {hasCoords: false};
}
}
此方法从页面url获取并解析名为“query”的参数
并将initMap（）方法修改为如下内容
function initMap(){
var coordsInQuery = getQueryParams();
// Map options
var options = {
zoom:13,
center:(coordsInQuery.hasCoords)?coordsInQuery:{lat:48.620837,lng:22.287864}
}
// New map
map = new google.maps.Map(document.getElementById('map'), options);
}
现在，您可以通过传递参数“query”将坐标传递到页面，以预先设置地图上的位置
例如：您的域/？query=47.5951518，-122.3316393只需对代码进行这些更改即可
将下面提到的方法添加到代码中：
function getQueryParams() {
// get the param 'query from url'
var query = location.search.split('query=')[1];
// if url has any parameter called 'query'
if (query){
// get the value of query and split it
var coords = query.split(',');
// separate lat and lng and return
return {hasCoords: true,coords:{lat: parseFloat(coords[0]), lng: parseFloat(coords[1])}};
} else {
// if url do not have any parameter called 'query'
return {hasCoords: false};
}
}
此方法从页面url获取并解析名为“query”的参数
并将initMap（）方法修改为如下内容
function initMap(){
var coordsInQuery = getQueryParams();
// Map options
var options = {
zoom:13,
center:(coordsInQuery.hasCoords)?coordsInQuery:{lat:48.620837,lng:22.287864}
}
// New map
map = new google.maps.Map(document.getElementById('map'), options);
}
现在，您可以通过传递参数“query”将坐标传递到页面，以预先设置地图上的位置
例如：您的域/？查询=47.5951518，-122.3316393