Angular谷歌地图API无法工作
angular google map api is not working?
Angularjs谷歌地图api不工作,我不知道我在控制台检查的错误是什么,我在控制台没有得到错误,如何解决这个问题。我带了小提琴http://jsfiddle.net/yqpx2/530/
angular.module('myApp', [])
.controller('MapCtrl', [
'$scope', '$http', '$compile',
function($scope, $http, $compile) {
//-------------------------------------------------------------------------------------------------------------------------------------------------
$scope.find = function(){
var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
content: ''
});
// Our markers
markers1 = [
['0', 'Madivala', 12.914494, 77.560381, 'car','as12'],
['1', 'Majestic', 12.961229, 77.559281, 'third','as13'],
['2', 'Ecity', 12.92489905, 77.56070772, 'car','as14'],
['3', 'Jp nagar', 12.91660662, 77.52047465, 'second','as15']
];
/**
* Function to init map
*/
function initialize() {
var center = new google.maps.LatLng(12.9667,77.5667);
var mapOptions = {
zoom: 12,
center: center,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (i = 0; i < markers1.length; i++) {
addMarker(markers1[i]);
}
}
/**
* Function to add marker to map
*/
function addMarker(marker) {
var category = marker[4];
var title = marker[1];
var pos = new google.maps.LatLng(marker[2], marker[3]);
var content = marker[1];
var fullContent = marker.slice(1,6).join();
var marker1 = new google.maps.Marker({
title: title,
position: pos,
category: category,
map: map
});
gmarkers1.push(marker1);
// Marker click listener
google.maps.event.addListener(marker1, 'click', (function (marker1, idx, markers1) {
return function () {
console.log('Gmarker 1 gets pushed');
var compiled = '<div><div>' +markers1[idx][0] + ' </div><div>' + markers1[idx][1] + ' </div><div>' +markers1[idx][2] + ' </div><div><button onclick="getid(markers1[' + idx + '][5])">Get</button></div></div>';
var infowindow = new google.maps.InfoWindow({
content: compiled
});
infowindow.open(map, marker1);
map.panTo(this.getPosition());
map.setZoom(15);
}
})(marker1,i, markers1));
}
function getid(id) {
console.log(id)
}
/**
* Function to filter markers by category
*/
filterMarkers = function (category) {
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
// If is same category or category not picked
if (marker.category == category || category.length === 0) {
marker.setVisible(true);
}
// Categories don't match
else {
marker.setVisible(false);
}
}
}
// Init map
initialize();
//--------------------------------------------------------------------------------------------------------------------------------------------------
}
}]);
<div ng-app="myApp" ng-controller="MapCtrl" ng-init="find()">
<div id="map-canvas"></div>
<select id="type" onchange="filterMarkers(this.value);">
<option value="">Please select category</option>
<option value="second">second</option>
<option value="car">car</option>
<option value="third">third</option>
</select>
</div>
add this
<style type='text/css'>
#map-canvas {
width: 500px;
height: 500px;
}
</style>
相关文章:
- 谷歌地图Api和JS代码不工作
- Backbone/Facebook API未按预期工作
- 在自动完成中使用Google Maps Places API;API不工作
- 给出<选项>标记一个类?API调用不工作
- Youtube Javascript API播放/暂停/停止不工作
- AWS API网关返回400错误请求,但Postman工作正常
- 天气应用 API 不再工作
- $.getJSON 和 google fonts API 停止在 Internet Explorer 中工作,jQuer
- 谷歌地图API停止在Wordpress模板中工作
- Yelp API、OAuth和Angular与JSONP只工作一次
- 噩梦与YouTube API和播放视频工作
- 在iPhone上,Vimeo Javascript API.play()函数没有'播放完视频后才能工作
- 如何使用应用程序脚本执行API从谷歌工作表中提取数据
- Chrome扩展的BatteryStatusneneneba API不工作
- Firefox页面工作人员API
- 使用ASP.Net MVC Web Api将JSON数据导出到Excel工作表
- youtube API播放视频、pauseVideo和stopVideo不工作
- API请求在使用phonegap调试时不工作,但在模拟器中工作,为什么
- Google Sheets API node.js快速入门不工作:API返回一个错误:error: unauthoriz
- Android WebView loadUrl JavaScript 不工作 API <=18(但在 API >=19