Javascript 无法将标记添加到谷歌地图_Javascript_Jquery_Maps_Markers

Javascript 无法将标记添加到谷歌地图

javascript jquery maps

Javascript 无法将标记添加到谷歌地图,javascript,jquery,maps,markers,Javascript,Jquery,Maps,Markers,哟辅助人员：）我不熟悉html，所以我需要一些帮助：）我一直在尝试在页面顶部放一张谷歌地图，具体高度：500/600px，宽度：100%。没问题。但是，当我尝试添加多个标记（如URL链接和自定义图标）时，它们不会显示..当我成功添加标记时，我的（自动完成嵌入的）搜索栏会消失：/能否有人帮我制作带有嵌入自动完成搜索栏和少量“链接”标记的谷歌地图？告诉我我做错了什么？我一直在寻找答案，但似乎找不到。先谢谢你如果有人看不懂这篇文章（sry不知道如何正确格式化），这里有一个链接，链接到my mega

哟辅助人员：）我不熟悉html，所以我需要一些帮助：）我一直在尝试在页面顶部放一张谷歌地图，具体高度：500/600px，宽度：100%。没问题。但是，当我尝试添加多个标记（如URL链接和自定义图标）时，它们不会显示..当我成功添加标记时，我的（自动完成嵌入的）搜索栏会消失：/能否有人帮我制作带有嵌入自动完成搜索栏和少量“链接”标记的谷歌地图？告诉我我做错了什么？我一直在寻找答案，但似乎找不到。先谢谢你

如果有人看不懂这篇文章（sry不知道如何正确格式化），这里有一个链接，链接到my mega with html。没有病毒，请不要威胁

    <https://mega.co.nz/#!8lAi2I4Q!cPb3XJKccd54Qm8QtnBV2QBWt42KVDFzgI89ZnRCBJo>

下面是来自html的相同代码：

<html>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false"
type="text/javascript"></script>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>                    <title>Garinfo</title>
<style>
html, body, #map-canvas {
height: 85%;
margin: 0px;
padding: 0px
}
.controls {
margin-top: 16px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
padding: 0 11px 0 13px;
width: 400px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
#pac-input:focus {
border-color: #4d90fe;
margin-left: -1px;
padding-left: 14px;  /* Regular padding-left + 1. */
width: 401px;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places">            </script>
<script>
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(45.242629, 19.827195),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var input = /** @type {HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(input);
var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
map.fitBounds(bounds);
var location1 = new google.maps.Map.LatLng(45.239115, 19.824766)
var location2 = new google.maps.Map.LatLng(45.244517, 19.847312)
var marker1 = new google.maps.Marker({

position: Location1,
url: 'http://www.facebook.com/',
map: map
    });
var marker2 = new google.maps.Marker({
position: Location2,
url: 'http://www.google.com/',
map: map
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
});
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#target {
width: 345px;
}
</style>
</head>
<body onunload="GUnload()">
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(45.239115, 19.824766),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: map.getCenter(),
url: 'http://www.google.com/',
map: map
});
    google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
</script>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas"></div>
</body>
</html>


加林福
html，正文，#地图画布{
身高：85%；
边际：0px；
填充：0px
}
.控制{
边缘顶部：16px；
边框：1px实心透明；
边界半径：2px 0 0 2px；
-moz框大小：边框框；
高度：32px；
大纲：无；
盒影：0 2px 6px rgba（0,0,0,0.3）；
}
#pac输入{
背景色：#fff；
填充：0 11px 0 13px；
宽度：400px；
字体系列：Roboto；
字体大小：15px；
字体大小：300；
文本溢出：省略号；
}
#pac输入：焦点{
边框颜色：#4d90fe；
左边距：-1px；
左填充：14px；/*常规左填充+1*/
宽度：401px；
}
.pac集装箱{
字体系列：Roboto；
}
#类型选择器{
颜色：#fff；
背景色：#4d90fe；
填充：5px11px 0px 11px；
}
#类型选择器标签{
字体系列：Roboto；
字体大小：13px；
字体大小：300；
}
}
函数初始化（）{
var map=new google.maps.map（document.getElementById（'map-canvas'）{
中心：新google.maps.LatLng（45.24262919.827195），
缩放：15，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
变量输入=/**@type{HTMLInputElement}*/(
document.getElementById（'pac-input'）；
map.controls[google.maps.ControlPosition.BOTTOM\u CENTER].push（输入）；
var searchBox=new google.maps.places.searchBox(
/**@type{HTMLInputElement}*/（输入））；
google.maps.event.addListener（搜索框，'places_changed'，函数（）{
var places=searchBox.getPlaces（）；
如果（places.length==0）{
返回；
}
for（var i=0，marker；marker=markers[i]；i++）{
marker.setMap（空）；
}
标记=[]；
var bounds=new google.maps.LatLngBounds（）；
for（var i=0，place；place=places[i]；i++）{
变量图像={
url:place.icon，
大小：新谷歌地图大小（71,71），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（17,34），
scaledSize:new google.maps.Size（25,25）
};
映射边界（bounds）；
var location1=新的google.maps.Map.LatLng（45.2391519.824766）
var location2=新的google.maps.Map.LatLng（45.244517,19.847312）
var marker1=新的google.maps.Marker({
位置：位置1，
网址：'http://www.facebook.com/',
地图：地图
});
var marker2=新的google.maps.Marker({
位置：位置2，
网址：'http://www.google.com/',
地图：地图
});
google.maps.event.addListener（标记'click'，函数（）{
window.location.href=marker.url；
});
标记器。推（标记器）；
扩展（place.geometry.location）；
}
});
google.maps.event.addListener（映射'bounds_changed'，函数（）{
var bounds=map.getBounds（）；
searchBox.setBounds（边界）；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
#目标{
宽度：345px；
}
var map=new google.maps.map（document.getElementById（'map'）{
缩放：15，
中心：新google.maps.LatLng（45.2391519.824766），
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var marker=new google.maps.marker({
位置：map.getCenter（），
网址：'http://www.google.com/',
地图：地图
});
google.maps.event.addListener（标记'click'，函数（）{
window.location.href=marker.url；
});

伙计

在分析和测试代码时，我发现至少有3个问题：

1）将地图添加到页面两次。请看第69行和第159行

2）固定第112行和第113行：

var Location1 = new google.maps.Map.LatLng(45.239115, 19.824766);
var Location2 = new google.maps.Map.LatLng(45.244517, 19.847312);

他们缺少“；”并且变量名与标记中使用的名称不匹配：

var marker1 = new google.maps.Marker({
  position: Location1,  //it should be written like this Location1
  url: 'http://www.facebook.com/',
  map: map
});

var marker2 = new google.maps.Marker({
  position: Location2, //it should be written like this Location2
  url: 'http://www.google.com/',
  map: map
});

3）不添加上面（1和2）的标记。是的，是特雷。这可能是由于一些原因：

3.1）第86行的函数
```
places\u changed
```
可能未被调用
3.2）places.length可能为0，使方法返回到第90行

运行上面的代码可以直接添加两个标记，而不会混淆搜索字段（我已经将其移动到

places\u changed

函数的正上方，并修复了javascript错误）

您可能会发现更多问题，但必须在继续之前解决。

我已经计算了通过Mega下载的文件中的行数。