gpt4 book ai didi

javascript - 带有 angularjs 1.5 的谷歌地图实现

转载 作者:行者123 更新时间:2023-11-30 00:06:12 24 4
gpt4 key购买 nike

我正在尝试在 Angular 1.5 上实现谷歌地图 map 正在渲染,但 map 上没有出现标记。该项目正在使用基于组件的 Angular 。我附上相关代码。请提出建议。

(function () {
'use strict';

angular.module('angularstrapApp')
.controller('mapController', mapController);

chaptersController.$inject = ["$scope", "$http", "$window", "$q", "asyncService"];

function chaptersController($scope, $http, $window, $q, asyncService) {

var vm = this;

vm.Heading = "map";
vm.Text = "This is a sample page.";

return vm;

}
})();
#map {
height: 75vh;
}

body {
font: bold 12px Arial;
}
a {
text-decoration: none;
}
/*#map{
height:500px;
width:500px;
box-shadow: 3px 3px 10px gray;
}*/
#repeat{
display: inline;
}
#country_container {
width: 1000px;
margin: 13px 3px 3px 0px;
text-align: center;
width: 85px;
padding: 4px;
display: inline-table;
color: white;
background-color: black;
font-size: 12px;
cursor: pointer;
border: 1px solid black;
border-radius:13px;
}
#country_container:hover {
box-shadow: 0px 0px 10px black;
background-color: gray;
border: 1px solid gray;
cursor: pointer;
}
#names {
cursor: pointer;
}
<div id = "map"></div>
<div id="repeat" ng-repeat="marker in markers | orderBy : 'title'">
<a id="country_container" href="#" ng-click="openInfoWindow($event, marker)">
<label id="names" >{{marker.title}}</label></a>
</div>


<script>

var cities = [
{
city : 'chicago',
lat : 42.578924,
long : -88.560553
},
{
city : 'Arizona',
lat : 34.048927,
long : -111.093735
},
{
city : 'Arkansas',
lat : 35.489746,
long : -93.824272
},
{
city : 'California',
lat : 36.778259,
long : -119.417931
}
];



function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 42.377254, lng: -87.934657},
zoom: 4
});

}


var markers = [];

var infoWindow = new google.maps.InfoWindow();

var createMarker = function (info){

var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(info.lat, info.long),
title: info.city
});
// marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';

google.maps.event.addListener(marker, 'click', function(){
infoWindow.setContent('<h2>' + marker.title); //+ '</h2>' + marker.content);
infoWindow.open(map, marker);
});

markers.push(marker);

}

for (i = 0; i < cities.length; i++){
createMarker(cities[i]);
}

marker.setMap(marker);

// $window.initialize = initialize;

openInfoWindow = function(e, selectedMarker){
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}


</script>

<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9vaOoEC1FPNIVfHMu0vlinnNhagjLsi4&amp;callback=initMap" async defer></script>

最佳答案

我建议使用包装谷歌地图的指令;例如 ngMap。我们在 map 密集型的大型项目中使用它并且效果很好。这是一个 plunker based on your code.

angular.module('ngMap').controller('MyCtrl', function() {
var vm = this;
vm.cities = [{
city: 'chicago',
lat: 42.578924,
long: -88.560553
}, {
city: 'Arizona',
lat: 34.048927,
long: -111.093735
}, {
city: 'Arkansas',
lat: 35.489746,
long: -93.824272
}, {
city: 'California',
lat: 36.778259,
long: -119.417931
}];

vm.showData = function(event, data) {
alert(data.city);
}

当点击一个标记时,showData 函数会显示一 strip 有所点击城市名称的警报。

和 HTML"

<div ng-controller="MyCtrl as vm">
<ng-map zoom="3" center="[42.578924, -88.560553]">
<marker ng-repeat="p in vm.cities" position="[{{p.lat}}, {{p.long}}]" data="{{p.city}}" on-click="vm.showData(event, p)" ; title="pos: {{p.city}}"></marker>
</ng-map>
</div>

ngMap documentation提供给你看 plunker 中的示例,这对你有很大帮助。

关于javascript - 带有 angularjs 1.5 的谷歌地图实现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38427005/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com