Question

我有一个html和js文件。我正在尝试使用javascript测试Google地图。我希望能够将位置动态添加到选择中。由于某些原因，＃号不起作用。我敢肯定，我只是想念这件事而已。

当我使用此代码时...

$('start').append('<option value="foo" selected="selected">Foo</option>');

为什么输出...

"<option value="foo" selected="selected">Foo</option>"

它显示双引号，并且不显示为HTML。

HTML

<html>
<head> 
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
    <div id="formAdd">
        <h1>Add Site</h1>

        <label for="name">Name:</label>
        <input type="text" id="name"><br>
    </div>
    <br/><br/>
    <div id="floating-panel">
            <b>Start: </b>
            <select id="start">
            </select>
            <b>End: </b>
            <select id="end">
            </select>
    </div>   
    <br/><br/>
    <div id="googleMap" style="width:50%;height:400px;float:left"></div>

    <div id="parent" style="float: left">
        <ul id="list">
        </ul>
    </div>

    <script src="https://maps.googleapis.com/maps/api/js?key=&callback=myMap"></script>
    <script src="map.js"></script>
</body>

这是我的JS文件

      var positions = [];
  var names = [];

  var $ = function (id) {
      return document.getElementById(id);
  }

  window.onload = function () { 
      initMap();
  }

  function getCurrentLocation(callback) {
      if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            callback(new google.maps.LatLng(position.coords.latitude,position.coords.longitude));
          });
      }
      else {
          throw new Error("Your browser does not support geolocation.");     
      }
  }  

  function initMap() {

      //Create new map in googleMap div
      map = new google.maps.Map($("googleMap"), {
        zoom: 10
      });

      //Get the current location
      geoLocation(map);

      //Map clicked, create marker
      map.addListener('click', function(e) {
          createMarker(e.latLng, map);

          for (var i = 1; i <= positions.length-1; i++) {
              $("start").append('<option value="(40.23277990064058, -75.04673282753907)">Test</option>');
          }
        });  
  }

  function createMarker(latLng, map) {
      var marker = new google.maps.Marker({
          position: latLng,
          map: map,
          title: $("name").value
      });

      //alert(marker.position);
      positions[positions.length] = marker.position;
      names[names.length] = marker.title;

  }

Answer 1

首先，应将#start用作ID选择器。其次，它工作正常：

$('#start').append('<option value="foo" selected="selected">Foo</option>');

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<select id="start"></select>

Answer 2

您好，我是新手，我不确定这是否正确，但是也许您可以尝试使用此代码

$("#start").append("<option value='"+(40.23277990064058, -75.04673282753907)+"'>Test</option>");

我只用＃和一些引号

Answer 3

此代码将与您的代码略有不同，因为我从头开始创建了此代码，并将其插入了代码的相关部分。但我希望这会有所帮助。我的代码现在正在为点击插入选择选项（在输入字段中提供名称时）。

  var positions = [];
  var names = [];

var map, infoWindow;
function initMap() {
  map = new google.maps.Map(document.getElementById('googleMap'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 6
  });
  infoWindow = new google.maps.InfoWindow;

  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      infoWindow.setPosition(pos);
      infoWindow.setContent('Location found.');
      infoWindow.open(map);
      map.setCenter(pos);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }

     //Map clicked, create marker
      map.addListener('click', function(e) {
          createMarker(e.latLng, map);

        var start = document.getElementById("start");
        var locationName = document.getElementById("name").value;
        start.options[start.options.length] = new Option(locationName, '40.23277990064058, -75.04673282753907');
        });  
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
                        'Error: The Geolocation service failed.' :
                        'Error: Your browser doesn\'t support geolocation.');
  infoWindow.open(map);
}

  function createMarker(latLng, map) {
      var marker = new google.maps.Marker({
          position: latLng,
          map: map,
          title: document.getElementById("name").value
      });

      //alert(marker.position);
      positions[positions.length] = marker.position;
      names[names.length] = marker.title;

  }

注意，我删除了jquery引用，并使用普通javascript来选择元素。这是因为“＃”以前给您带来麻烦（并且Google文档使用的是香草js，所以我也选择了这条路线）。希望对您有所帮助，但是如果您的需求不能满足您的要求，请告诉我。

-另外，我已经将位置数据进行了硬编码，一旦开始工作，您可能希望动态地将其取回。

jQuery-附录在HTML中显示双引号

3 个答案: