在视图 yii2 中使用内联脚本

Question

我在网上找到了 jquery 代码来集成 google 地图，我想集成到我的应用程序中以正确获取地址。 This is the jquery i found。我正在使用 yii2 高级模板。我新建了一个名为LocateAsset.php的AssetBundle 代码如下

class LocateAsset extends AssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
    'css/site.css',
];
public $js = [
    'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
    'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js',
    'src/jquery.ui.addresspicker.js',
    'src/addresspickermap.js',

];
public $depends = [
    'yii\web\YiiAsset',
    'yii\bootstrap\BootstrapAsset',
];
}

原始演示插件页面上有内联脚本，但我创建了名为 addresspickermap.js 的单独 .js 文件。我确实使用

注册了表格

use backend\assets\LocateAsset;
LocateAsset::register($this);

并且在同一个 _form.php 中，我使用了代码来集成地图

<div class="event-form">

<?php $form = ActiveForm::begin(); ?>
 <?= $form->field($model, 'location')->textInput(['maxlength' => true]) ?>
<div class='clearfix'>
<div class='input input-positioned'>
  <label>Address : </label> <input id="addresspicker_map" />   <br/>
  <label>Locality: </label> <input id="locality" disabled=disabled> <br/>
  <label>SubLocality: </label> <input id="sublocality" disabled=disabled> <br/>
  <label>Borough: </label> <input id="administrative_area_level_3" disabled=disabled> <br/>
  <label>District: </label> <input id="administrative_area_level_2" disabled=disabled> <br/>
  <label>State/Province: </label> <input id="administrative_area_level_1" disabled=disabled> <br/>
  <label>Country:  </label> <input id="country" disabled=disabled> <br/>
  <label>Postal Code: </label> <input id="postal_code" disabled=disabled> <br/>
  <label>Lat:      </label> <input id="lat" disabled=disabled> <br/>
  <label>Lng:      </label> <input id="lng" disabled=disabled> <br/>
  <label>Zoom:     </label> <input id="zoom" disabled=disabled> <br/>
  <label>Type:     </label> <input id="type" disabled=disabled /> <br/>
</div>

<div class='map-wrapper'>
  <label id="geo_label" for="reverseGeocode">Reverse Geocode after Marker Drag?</label>
  <select id="reverseGeocode">
    <option value="false" selected>No</option>
    <option value="true">Yes</option>
  </select><br/>

  <div id="map"></div>
  <div id="legend">You can drag and drop the marker to the correct location</div>
</div>

</div>

<?php ActiveForm::end(); ?>


</div>

但我不知道我在表单页面上缺少什么，因为我没有在表单页面上获取地图地址字段都不起作用让我知道我做错了什么。谢谢

Answer 1

我觉得你的代码没问题。如果您想检查脚本是否正常工作，请尝试 firebug 或 google chrome，转到检查该页面上的元素，转到源代码部分并在那里找到脚本。

使用断点并刷新页面或生成应该使用脚本的事件，您将知道是否包含您的脚本。

可能还有一个问题是您的 css 代码可能与同名冲突。尝试更改地图的名称或 ID 并查看。

Google 集成地图的示例，您会发现大量关于如何在页面上实现地图的示例。

在视图 yii2 中使用内联脚本

Use inline script in views yii2

javascript

php

jquery

yii2

yii2-advanced-app