谷歌地图不是以HTML显示，而是在JS Fiddle上工作

Google Map not displaying in HTML but working on JS Fiddle

本文关键字：JS Fiddle 工作 HTML 显示 谷歌地图      更新时间：2023-09-26

我在JSFiddle中使用了一些代码，并设法使其完全按照我的意愿运行。JSFiddle中的输出窗口提供了正确的输出，但每当我试图让代码在网页中工作时，地图永远不会显示。我尝试了几种方法，包括直接从Chrome中的视图框选项获取代码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
      <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true_or_false"></script>
  <style type="text/css">
     #map-canvas {
    width:800px;
    height:800px
}
  </style>
  <title></title>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var map;
var infowindow;
var searchData = null;
var georssLayer;
myLatLng = new google.maps.LatLng(53.494170, -1.146462);
var mapOptions = {
    zoom: 9,
    center: myLatLng
}
var kmlURL = 'http://stashbox.org/1491090/proposed_school.kml'

map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
infowindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
georssLayer = new google.maps.KmlLayer(kmlURL,{preserveViewport:true});
georssLayer.setMap(map);
//used pipes to convert kml to json and loaded it
$.ajax("http://pipes.yahoo.com/pipes/pipe.run?_id=10a81555228e77349570df1cc6823ed2&_render=json&urlinput1=" + kmlURL).done(function (data) {
    console.log('here')
    searchData=data.value.items[0].Document.Placemark //structrue of pipe
})
function createMarker(place) {
    var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location
    });
    google.maps.event.addListener(marker, 'click', function () {
        service.getDetails(place, function(result, status) {
              if (status != google.maps.places.PlacesServiceStatus.OK) {
                alert(status);
                return;
              }
              infowindow.setContent(result.name);
              infowindow.open(map, marker);
            });
        });
}
function createMarkerKML(place){
    var loc=place.Point.coordinates.split(",")
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(loc[1],loc[0])
    });
    google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent(place.name);
        infowindow.open(map, marker);
    })
}
function searchKML(request,callback){
    var ret=[]
    if(!searchData) return
    for(var i=0;i<searchData.length;i++){
        //insert distance search
        if( searchData[i].description.indexOf(request.keyword)!=-1 ||   //currently case sensitive
            searchData[i].name.indexOf(request.keyword)!=-1 ){
            ret.push(searchData[i])
        }
    }
    callback(ret)
}

function searchMap(str) {
    var request = {
        location: map.getCenter(),
        radius: '2500',
        keyword: str
    };
    service.radarSearch(request, callback); //normal search
    searchKML(request,function(results){
        for (var i = 0; i < results.length; i++) {
            createMarkerKML(results[i]);
        }
    })
}
function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
       console.log(results)
        for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
        }
    }
}
searchform.onsubmit = function (e) {
    e.preventDefault();
    searchMap(document.getElementById("search").value);
}
toggle.onclick = function () {
    if (toggle.value == "Hide KML Layer") {
        georssLayer.setMap(null)
        toggle.value = "Show KML Layer"
    } else {
        georssLayer.setMap(map)
        toggle.value = "Hide KML Layer"
    }
}
});//]]> 
</script>

</head>
<body>
  <form id="searchform">
    <input type="text" id="search" value="school" enabled/>
    <input type="submit" value="Search" />
</form>
<input type="button" value="Hide KML Layer" id="toggle" />
<div id="map-canvas"></div>
</body>
</html>

关于为什么我不能让它出现在HTML中，有什么帮助/想法/建议吗？看了几个不同的老问题，试了几个建议，但还是没有快乐。使用Windows10&最新的谷歌Chrome版本（如果有帮助的话）。

谢谢，Sie

可能是jQuery没有加载吗？尝试更改

//code.jquery.com/jquery-1.10.1.js至：

https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js

相关文章：