- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
问题:我无法在 Google map 上显示标记。我希望用户单击,显示标记,并且 map 以标记为中心。
损坏的地方:点击时不显示任何标记。 map 下方的纬度/经度 div 也不显示。
有效方法: map 会显示,并正确地以点击位置为中心。变量 mapClicked
更新为 true
。
self 诊断:我认为该问题源于 vm.map
的范围问题,或者未对 vm.map
进行更改在 AngularJS 生命周期中消化。
第三方软件包:我正在使用Angular Google Maps.
我的代码片段:
HTML:
<ui-gmap-google-map id="listingMap"
center='listingCtrl.map.center'
zoom='listingCtrl.map.zoom'
events='listingCtrl.map.events'
style="height: 250px; width: 100%">
<ui-gmap-marker ng-if="listingCtrl.mapClicked"
coords="listingCtrl.map.marker"
idKey=" 'userClickLocation' ">
</ui-gmap-marker>
</ui-gmap-google-map>
<div class="col-xs-12" ng-if="listingCtrl.map.marker.latitude">
<span style="font-weight: bold">Latitude: </span>{{ listingCtrl.map.marker.latitude }}
<span style="font-weight: bold">Longitude: </span>{{ listingCtrl.map.marker.longitude }}
</div>
Controller :
(function () {
'use strict';
angular.
module('boat').
controller('NewListingController', NewListingController);
function NewListingController() {
var vm = this;
vm.activePage = 1;
vm.map = getMap();
vm.mapClicked = false;
////////////////////
function getMap() {
var map = {
center: {latitude: 20.9, longitude: -78.1},
zoom: 5,
marker: {},
events: {
click: function (map, eventName, originalEventArgs) {
var e = originalEventArgs[0];
map.marker = {latitude: e.latLng.lat(), longitude: e.latLng.lng()};
map.panTo(new google.maps.LatLng(map.marker.latitude, map.marker.longitude));
vm.mapClicked = true;
}
}
};
return map;
}
}
})();
回顾:用户期望的行为是单击 map 以添加标记。坐标应呈现在 map 下方。 map 应以点击为中心。额外的点击会更新单个标记和坐标。
你能帮忙吗?
最佳答案
问题是 map
click
上的参数事件处理程序与名为 map
的现有局部变量冲突getMap
内功能。
只需更改 click
事件处理程序参数为 mapObject
并调用panTo
就解决了这个问题。
// ...
click: function(mapObject, eventName, originalEventArgs) {
/*^^^^^*/
var e = originalEventArgs[0];
map.marker = {
latitude: e.latLng.lat(),
longitude: e.latLng.lng()
};
mapObject.panTo(new google.maps.LatLng(map.marker.latitude, map.marker.longitude));
/*^^^^^*/
vm.mapClicked = true;
}
// ...
JS Fiddle修复后。
或者查看下面的代码片段。
angular.module('boat', ['nemLogging', 'uiGmapgoogle-maps']);
(function() {
'use strict';
angular.
module('boat').
controller('NewListingController', NewListingController);
function NewListingController() {
var vm = this;
vm.activePage = 1;
vm.map = getMap();
vm.mapClicked = false;
////////////////////
function getMap() {
var map = {
center: {
latitude: 20.9,
longitude: -78.1
},
zoom: 5,
marker: {},
events: {
click: function(mapObject, eventName, originalEventArgs) {
var e = originalEventArgs[0];
map.marker = {
latitude: e.latLng.lat(),
longitude: e.latLng.lng()
};
mapObject.panTo(new google.maps.LatLng(map.marker.latitude, map.marker.longitude));
vm.mapClicked = true;
}
}
};
return map;
}
}
})();
.angular-google-map-container {
height: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdn.rawgit.com/nmccready/angular-simple-logger/master/dist/browser.js"></script>
<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.2.1/angular-google-maps.min.js"></script>
<div ng-app="boat">
<div ng-controller="NewListingController as listingCtrl">
<!-- CODE IN QUESTION BEGINS -->
<ui-gmap-google-map id="listingMap" center='listingCtrl.map.center' zoom='listingCtrl.map.zoom' events='listingCtrl.map.events' style="height: 250px; width: 100%">
<ui-gmap-marker ng-if="listingCtrl.mapClicked" coords="listingCtrl.map.marker" idKey=" 'userClickLocation' "></ui-gmap-marker>
</ui-gmap-google-map>
<div class="col-xs-12" ng-if="listingCtrl.map.marker.latitude"> <span style="font-weight: bold">Latitude: </span>{{ listingCtrl.map.marker.latitude }} <span style="font-weight: bold">Longitude: </span>{{ listingCtrl.map.marker.longitude }}</div>
<!-- CODE IN QUESTION ENDS -->
</div>
</div>
关于AngularJS 谷歌地图 : Add/update marker and update centerpoint on click,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33114441/
命令 npm update 有什么区别和包裹npm-check-updates ?使用后者是否完全安全? 执行后好像是npm update并非所有软件包都已更新,因此似乎不完整。许多其他 popula
我有使用 ExpressJS 和 ORM Sequelize 的 API。我正在尝试使用 Sequelize 中的 update() 方法进行更新。默认情况下,it 方法将返回更新的行数。但我希望结果
关于如何更新 rubygems 有点困惑。过程不断变化(或者至少我从互联网上得到了相互矛盾的信息)。 $ gem outdated rubygems-update (1.8.10 < 1.8.11
我正在使用 webpack-dev-server处于开发模式( watch )。每次服务器重新加载时,一些 json 和 js 文件都会挤满我的构建目录,如下所示:'hash'.hot-update.
Mamp Pro 的当前版本是 5.04 (15996)。可用更新窗口显示“Mamp 5.0.0 > 5.1。更新失败,并显示一条消息:错误:无法验证更新。请确保您使用的是安全网络,然后重试。” 更新
我想在浏览量增加时更新时间戳“lastpageview_at”。我想我已经接近了,但我总是遇到语法错误,有人知道为什么或有其他解决方案吗? 我的触发器: CREATE TRIGGER Update_l
我正在执行 SELECT ... FOR UPDATE 以锁定一条记录,然后进行一些计算,然后进行实际的 UPDATE。我正在处理 InnoDB 数据库。 但是计算可能会以我不想执行 UPDATE 的
我需要在表更新时进行一些更新和插入以强制执行正确的数据。将 UPDATE 语句放入触发器中会导致某种“循环”吗? 谢谢! 最佳答案 更新触发器中的目标表将使触发器再次触发。 您可以使用 TRIGGER
这是我的布局 当我点击链接更新时,该链接应该打开和关闭renderComment bool
我有一个包含两件事的 Angular 范围: 一个包含 10k 行的巨型表格,需要一秒钟才能渲染 一些小的额外信息位于固定的覆盖标题栏中 根据您向下滚动页面/表格的距离,我必须更新标题中的小信息位之一
标题几乎已经说明了一切。 IF NEW.variance <> 0 THEN (kill update) END IF 这可能吗? 最佳答案 查看手册 (http://dev.mysql.com/do
我有几个表,我想强制执行版本控制,并且有一个生效日期和生效日期。每当应用程序或用户向该表写入更新时,我希望它重定向到两个全新的命令:更新目标记录,以便 EFFECTIVE_TO 日期填充当前日期和时间
我正在使用 Shopware,一件奇怪的事情让我抓狂 :( 所以我将首先解释问题是什么。 除了普通商品外,还有多种款式的商品,例如不同尺码的衬衫。这是 XS、S、M、L 和/或不同颜色的同一商品……但
寻求帮助制作 mysql 触发器。我当前的代码无法按预期工作。我想做的是,如果表A中的字段A被修改,则将字段A复制到表A中的字段B。 当前代码如下所示: BEGIN IF new.set_id=301
以下查询(来自此处Postgres SQL SELECT and UPDATE behaving differently) update fromemailaddress set call =
我想使用 D3 使用以下数据创建一个列表: var dataSet = [ { label: 'a', value: 10}, { label: 'b', value: 20},
哪个更好,先进行选择,然后进行更新。或者更确切地说,像这样合而为一: UPDATE items set status = 'NEW' where itemid in (1,2,3,
对于 eloquent model events,updating 和 updated 之间有什么区别? ? 我的猜测是 updating 在模型更新之前触发,而 updated 在模型更新之后触发。
我有一个对象数组(我们称之为arr)。在我的组件输入之一的 (change) 方法中,我修改了这些对象的属性之一,但在 View (*ngFor) 中没有任何变化。我读到 Angular2 变化检测不
我正在尝试使用 d3.js 构建水平日历时间线。主要目标是突出显示用户的假期和假期。 http://jsbin.com/ceperavu/2/edit?css,js,output 我首先从“开始”日期
我是一名优秀的程序员,十分优秀!