Html 使用共享url嵌入google地图

比如说，你去谷歌地图搜索“沃尔玛”，然后选择列表中的第一个沃尔玛，你会得到一个URL，如：

https://www.google.com/maps/place/Walmart+超级中心/@41.7991677，-70.5882922,10z/数据=！4m5！1m2！2m1！沃尔玛！3m1！10x89E4C6127CC5B685:0x104d337439f46ea9

然后，若你们转到那个URL，它会给你们一个带有精确定位的有效地图。这（上面）是存储在我的数据库中的URL，因此是我想要用来嵌入地图的URL

当然，我不能使用该URL嵌入iframe，而是必须使用：

https://www.google.com/maps/embed?pb=!1m14！1m8！1m3！1d380717.11119594605！2d-70.5882922！3d41.7991677！3m2！1i1024！2i768！4f13.1！3m3！1m2！10x89E4C6127CC5B685%3A0x104d337439f46ea9！2沃尔玛+超级中心！5e0！3m2！1森！我们！4V14452946764

所以。。。对于任何可共享的Google Maps url，我如何将其转换为可嵌入的url以用作iframe

src

---

我可以使用PHP在服务器端完成，也可以使用javascript在客户端完成。使用正则表达式是可以接受的。

这可以做到：

$matches = [];

preg_match("/@(.*?),(.*?),/",$str,$matches);

$place = $matches[1];

preg_match("/@(.*?),(.*?),/",$str,$matches);

$lat = $matches[1];
$long = $matches[2];

echo '<iframe src="https://www.google.com/maps/embed/v1/place?q='.$place.'&center='.$lat.','.$long.'&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU&zoom=8" frameborder="0"></iframe>';

$matches=[]；
preg_match（“/@（.*），（.*），/”，$str，$matches）；
$place=$matches[1]；
preg_match（“/@（.*），（.*），/”，$str，$matches）；
$lat=$matches[1]；
$long=$matches[2]；
回声'；

---

在第一个@char之后，它定位了纬度和逻辑度，您可以使用我编写的正则表达式提取它，然后在两个组上捕获输出并将其添加到嵌入的URL上。

不知道为什么要进行此转换和所有转换，但是如果您使用的是javascript客户端，那么您可以使用javascript

然后，您将直接获得lat/lng，您可以存储它们并用于所有未来的呼叫，这似乎更清洁

请参阅下面的代码

html，
身体{
身高：100%；
保证金：0；
填充：0；
}
#地图{
身高：100%；
}
.控制{
边缘顶部：10px；
边框：1px实心透明；
边界半径：2px 0 0 2px；
框大小：边框框；
-moz框大小：边框框；
高度：32px；
大纲：无；
盒影：0 2px 6px rgba（0,0,0,0.3）；
}
#pac输入{
背景色：#fff；
字体系列：Roboto；
字体大小：15px；
字体大小：300；
左边距：12px；
填充：0 11px 0 13px；
文本溢出：省略号；
宽度：300px；
}
#pac输入：焦点{
边框颜色：#4d90fe；
}
.pac集装箱{
字体系列：Roboto；
}
#类型选择器{
颜色：#fff；
背景色：#4d90fe；
填充：5px11px 0px 11px；
}
#类型选择器标签{
字体系列：Roboto；
字体大小：13px；
字体大小：300；
}
放置搜索框
#目标{
宽度：345px；
}
//本例使用Google Place Autocomplete将搜索框添加到地图中
//特色。人们可以进入地理搜索。搜索框将返回一个
//包含位置和预测搜索词组合的拾取列表。
函数initAutocomplete（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：{
lat:-33.8688，
液化天然气：151.2195
},
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
//创建搜索框并将其链接到UI元素。
var input=document.getElementById（'pac-input'）；
var searchBox=newgoogle.maps.places.searchBox（输入）；
map.controls[google.maps.ControlPosition.TOP_LEFT].push（输入）；
//将搜索框结果偏向当前地图的视口。
addListener（'bounds_changed'，function（）{
searchBox.setBounds（map.getBounds（））；
});
//[开始区域\u getplaces]
//侦听用户选择预测并检索时激发的事件
//关于那个地方的更多细节。
var标记；
searchBox.addListener（'places\u changed'，function（）{
var places=searchBox.getPlaces（）；
如果（places.length==0）{
返回；
}
console.log（'place:'+places[0]）；
如果（标记！=null）
marker.setMap（空）；
变量图标={
url:places[0]。图标，
大小：新谷歌地图大小（71,71），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（17,34），
scaledSize:new google.maps.Size（25,25）
};
marker=新的google.maps.marker({
地图：地图，
//图标：图标，
标题：地点[0]。名称，
位置：放置[0]。几何体。位置
});
map.setCenter（位置[0].geometry.location）；
//保存位置[0].geometry.location以供将来参考
});
//[结束区域\u getplaces]
}

客户端选项：

$（函数（）{
var str='1〕https://www.google.com/maps/place/Walmart+超级中心/@41.7991677，-70.5882922,10z/数据=！4m5！1m2！2m1！1swallmart！3m1！1s0x89e4c6127cc5b685:0x104d33749f46ea9'；
var matches=str.match（/\/@（[\d\，-]+）z\/）[1]；
var splits=matches.split（'，'）；
var lat=拆分[0]；
var long=拆分[1]；
var zoom=splits[2]；
var url='1〕http://maps.google.com/maps?q=“+lat+”、“+long+”&z=“+zoom+”&output=embed”；
$（'#output'）.html（''）；
});

但是其他部分呢（
！1m14！1m8！1m3！1d380717.11119594605！2d
和
！3d
和
！3m2！1i1024！2i768！4f13.1！3m3！1m2！10x89E4C6127CC5B685%3A0x104d337439f46ea9！2sWalmart+超级中心！5e0！3m2！1sen！2sus！4V145294664
）？这些不会随着地点的不同而改变吗？@Jakar我更新了我的问题，所以你可以使用t