为什么我的Javascript含糊不清? [英] Why is my Javascript confliciting?

查看：77 发布时间：2019/6/20 9:15:18 Javascript jQuery

本文介绍了为什么我的Javascript含糊不清?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我目前正在创建一个小的HTML5和Javascript应用程序.我正在使用geolocations API和JQuery可排序的UI javascript，但是它们似乎存在冲突.当我打开页面时，不再显示地理位置地图.

我的index.html文件:

I am currently creating a small HTML5 and Javascript application. I am using geolocations API and JQuery sortable UI javascript, however they seem to be conflicting. When I open my page, the geolocations map no longer appears.

My index.html file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset=utf-8>
<link type="text/css" rel="stylesheet" href="css/clearfix.css" media="screen,project">
<link type="text/css" rel="stylesheet" href="css/style.css" media="screen,project">
<link type="text/css" rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" media="screen,projection">
<title>HTML5 & JQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>

<style type="text/css">
  .column.left { width: 375px; float: left; margin-right: 50px; }
  .column.right { width: 375px; float: right; }
  .portlet { margin: 0 0 1em 0; }
  .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
  .portlet-header .ui-icon { float: right; }
  .portlet-content { padding: 0.4em; }
  .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
  .ui-sortable-placeholder * { visibility: hidden; }
</style>

<script type="text/javascript">
  $(function() {
    $(".column").sortable({
      connectWith: '.column'
    });

    $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
      .find(".portlet-header")
        .addClass("ui-widget-header ui-corner-all")
        .prepend('<span class="ui-icon ui-icon-plusthick"></span>')
        .end()
      .find(".portlet-content");

    $(".portlet-header .ui-icon").click(function() {
      $(this).toggleClass("ui-icon-minusthick");
      $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });

    $(".column").disableSelection();
  });
</script>
</head>

<body>

    <header id="topHeader">
        <div class="wrapper">
            <p>Zakary Faithfull - Scripting For Digital Media</p>
        </div>
    </header>

    <section id="content">

        <header>
            <h1>HTML5 & JQuery Dashboard</h1>
        </header>


        <section class="location">
            <article>
                <p>Finding your location: <span id="status">checking...</span></p>
            </article>

            <script type="text/javascript" src="js/geo.js"></script>
        </section>


        <section class="widgets clearfix">

        <div class="column left">

            <div class="portlet">
                <div class="portlet-header">Shopping</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>

        </div>

        <div class="column right">

            <div class="portlet">
                <div class="portlet-header">Links</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>

            <div class="portlet">
                <div class="portlet-header">Images</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>

        </div>

        </section>

    </section>

</body>
</html>

我的geo.js文件

My geo.js file

function success(position) {
  var s = document.querySelector('#status');

  if (s.className == 'success') {
    // not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back
    return;
  }

  s.innerHTML = "Found You";
  s.className = 'success';

  var mapcanvas = document.createElement('div');
  mapcanvas.id = 'mapcanvas';
  mapcanvas.style.height = '300px';
  mapcanvas.style.width = '100%';

  document.querySelector('article').appendChild(mapcanvas);

  var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var myOptions = {
    zoom: 15,
    center: latlng,
    mapTypeControl: false,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);

  var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title:"You are here!"
  });
}

function error(msg) {
  var s = document.querySelector('#status');
  s.innerHTML = typeof msg == 'string' ? msg : "failed";
  s.className = 'fail';

  // console.log(arguments);
}

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error);
} else {
  error('not supported');
}

任何帮助将不胜感激.

Any help would be much appreciated.

为什么我的Javascript含糊不清? [英] Why is my Javascript confliciting?

问题描述

推荐答案

相关文章

其他开发语言最新文章

热门教程

热门工具

登录关闭

为什么我的Javascript含糊不清? [英] Why is my Javascript confliciting?

问题描述

推荐答案

相关文章

其他开发语言最新文章

热门教程

热门工具

登录 关闭

登录关闭