不能让JSFiddle工作
[英]Cant get a JSFiddle to work
问题描述
I'm trying to implement a search feature using google maps and came across this jsfiddle. 
我正在尝试使用Google Maps实现搜索功能，并遇到了这个 jsfiddle。
However, when i tried to implement it with my webpage, it fails to load the same way on the JSFiddle. 但是，当我尝试用我的网页实现它时，它无法在JSFiddle上以相同的方式加载。
I am using the Netbeans IDE, and created an HTML5 project. 我正在使用Netbeans IDE，并创建了一个HTML5项目。 This is my first html project so I am unfamilar with js/html integration. 这是我的第一个html项目，所以我不熟悉js / html集成。
Here is the code for the JSFiddle due to requirements 由于需要，这是JSFiddle的代码
function initialize() { var markers = []; var map = new google.maps.Map(document.getElementById('map-canvas'), { mapTypeId: google.maps.MapTypeId.ROADMAP }); var defaultBounds = new google.maps.LatLngBounds( new google.maps.LatLng(-33.8902, 151.1759), new google.maps.LatLng(-33.8474, 151.2631)); map.fitBounds(defaultBounds); // Create the search box and link it to the UI element. var input = /** @type {HTMLInputElement} */ ( document.getElementById('pac-input')); map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); var searchBox = new google.maps.places.SearchBox( /** @type {HTMLInputElement} */ (input)); // Listen for the event fired when the user selects an item from the // pick list. Retrieve the matching places for that item. google.maps.event.addListener(searchBox, 'places_changed', function() { var places = searchBox.getPlaces(); 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++) { // Create a marker for each place. var marker = new google.maps.Marker({ map: map, title: place.name, position: place.geometry.location }); markers.push(marker); bounds.extend(place.geometry.location); } map.fitBounds(bounds); }); } initialize();
#map-canvas { height: 400px; width: 600px; } .controls { margin-top: 16px; border: 1px solid transparent; border-radius: 2px 0 0 2px; box-sizing: border-box; -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; }
<div id="map-canvas"></div> <input id="pac-input" class="controls" type="text" placeholder="Search Box">
Even as I post the same code from JSFiddle into the code snippet on the site, it doesnt seem to even load. 即使我将JSFiddle中的相同代码发布到站点上的代码片段中，它似乎也没有加载。
To avoid redundency, i will only post my html file, as the CSS and JS are the same as the jsfiddle linked. 为了避免冗余，我只会发布html文件，因为CSS和JS与链接的jsfiddle相同。 (Mapper.js -> js file containing the fiddle code) （Mapper.js->包含小提琴代码的js文件）
<!DOCTYPE html>
<html>
<title>Google Maps with a Table</title>
<link rel="shortcut icon" href="">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/libs/jquery/jquery.js"></script>
<script type="text/javascript" src="js/libs/jqueryui/jquery-ui.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<link type="text/css" rel="stylesheet" href="css/basecss.css">
<body>
<div id="map-canvas"></div>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<script type="text/javascript" src="js/Mapper.js"></script>
</body>
</html>
And finally, this is what my page looks like. 最后，这就是我的页面的样子。 Notice how the google map looks different from the JSFiddle one. 请注意，谷歌地图看起来与JSFiddle有所不同。
Edit - Forgot that netbeans was showing me an error 编辑-忘记了netbeans向我显示了一个错误
Uncaught TypeError: Cannot read property 'SearchBox' of undefined (15:08:11:023 | error, javascript)
at initialize (public_html/js/Mapper.js:19:43)
2 个解决方案
解决方案1
4 已采纳 2015-10-14 19:16:18
The error suggests the google maps library did not load. 该错误表明Google Maps库未加载。
You're not rendering the google api source url from html to text. 您没有将google api源url从html呈现为文本。 I think your url should use & instead of & 我认为您的网址应使用&而不是& . 。
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
Also missing libraries=places from the external resource of the jsFiddle. 还缺少jsFiddle的外部资源中的libraries=places 。
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&libraries=places&sensor=false"></script>
解决方案2
0 2015-10-14 19:27:49
The problem was that there was an external library loaded on the sidebar, which I did not check. 问题是，边栏上加载了一个外部库，我没有检查。
Changing this script 更改此脚本
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
to 至
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.