我想在谷歌地图中显示不同的标记图标。我已经包含了我的代码。我在标记1 [7]中有不同的图标。我想在谷歌地图中显示这些图标我添加了小提琴https://jsfiddle.net/h9seLt22/7/而不是默认标记iconi需要显示动态标记图标
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, 'computer science,electronic system,communication thoery,english', 'as12', 'Abi Tech ACC','http://static4.wikia.nocookie.net/__cb20131121214007/destinypedia/images/7/71/Information_Icon.svg'],
['1', 'Majestic', 12.961229, 77.559281, 'electronic system,Telecommunication,optical&fiber optics', 'as13', 'Vell Infotech','http://icons.iconarchive.com/icons/kyo-tux/aeon/256/Sign-LogOff-icon.png'],
['2', 'Ecity', 12.92489905, 77.56070772, 'communication thoery,english,Digital Electronics,signal&systems', 'as14', 'vinoth coching center','http://icons.iconarchive.com/icons/artua/mac/512/Intranet-icon.png'],
['3', 'Jp nagar', 12.91660662, 77.52047465, 'Digital Electronics,signal&systems', 'as15', 'Gpy tech archi','http://www.psdgraphics.com/file/upload-icon.jpg']
];
/**
* 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 id="' + 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));
}
$(document.body).on('click', 'button', function () {
console.log(this.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.toLowerCase().indexOf(category.toLowerCase()) > -1 || category.length === 0) {
marker.setVisible(true);
}
// Categories don't match
else {
marker.setVisible(false);
}
}
}
// Init map
initialize();
}
}]); #map-canvas {
width: 500px;
height: 500px;
}<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<div ng-app="myApp">
<div 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="computer science">computer science</option>
<option value="electronic system">electronic system</option>
<option value="communication thoery">communication thoery</option>
<option value="english">english</option>
<option value="optical&fiber optics">optical&fiber optics</option>
<option value="Digital Electronics">Digital Electronics</option>
<option value="signal&systems">signal&systems</option>
</select>
</div>
</div
答案 0 :(得分：0)
您可以使用Marker对象初始化程序
var marker = new google.maps.Marker({
title: location[1],
position: new google.maps.LatLng(location[2], location[3]),
category: location[4],
map: $scope.map,
//icon: location[7] //set icon
});
或使用google.maps.Marker.setIcon函数：
var imageIcon = {
url: location[7],
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(32, 32),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(0, 32)
};
marker.setIcon(imageIcon);
下面提供了一个修改示例，演示了如何设置标记图标
修改后的示例
angular.module('myApp', [])
.controller('MapCtrl', [
'$scope', '$http', '$compile',
function ($scope, $http, $compile) {
/**
* Function to filter locations by category
*/
$scope.filterMarkers = function () {
var category = $scope.selectedItem;
for (var i = 0; i < $scope.markers.length; i++) {
var marker = $scope.markers[i];
// If is same category or category not picked
if (marker.category.toLowerCase().indexOf(category.toLowerCase()) > -1 || category.length === 0) {
marker.setVisible(true);
}
// Categories don't match
else {
marker.setVisible(false);
}
}
};
//-------------------------------------------------------------------------------------------------------------------------------------------------
$scope.initMap = function () {
$scope.markers = [];
var infowindow = new google.maps.InfoWindow({
content: ''
});
var locations = [
['0', 'Madivala', 12.914494, 77.560381, 'computer science,electronic system,communication thoery,english', 'as12', 'Abi Tech ACC', 'http://icons.iconarchive.com/icons/martz90/hex/32/location-icon.png'],
['1', 'Majestic', 12.961229, 77.559281, 'electronic system,Telecommunication,optical&fiber optics', 'as13', 'Vell Infotech', 'http://icons.iconarchive.com/icons/graphicloads/100-flat/32/location-icon.png'],
['2', 'Ecity', 12.92489905, 77.56070772, 'communication thoery,english,Digital Electronics,signal&systems', 'as14', 'vinoth coching center', 'http://icons.iconarchive.com/icons/graphicloads/seo-services/32/location-icon.png'],
['3', 'Jp nagar', 12.91660662, 77.52047465, 'Digital Electronics,signal&systems', 'as15', 'Gpy tech archi', 'http://icons.iconarchive.com/icons/graphicloads/transport/32/location-icon.png']
];
/**
* 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
};
$scope.map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (var i = 0; i < locations.length; i++) {
addMarker(locations[i]);
}
}
/**
* Function to add marker to map
*/
function addMarker(location) {
var marker = new google.maps.Marker({
title: location[1],
position: new google.maps.LatLng(location[2], location[3]),
category: location[4],
map: $scope.map,
//icon: location[7] //set icon
});
var imageIcon = {
url: location[7],
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(32, 32),
// The origin for this image is (0, 0).
//origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
//anchor: new google.maps.Point(0, 32)
};
marker.setIcon(imageIcon);
$scope.markers.push(marker);
// Marker click listener
google.maps.event.addListener(marker, 'click', (function(){
var compiled = '<div><div>' + location[0] + ' </div><div>' + location[1] + ' </div><div>' + location[2] + ' </div><div><button id="' + location[5] + '">Get</button></div></div>';
var infowindow = new google.maps.InfoWindow({
content: compiled
});
infowindow.open($scope.map, marker);
$scope.map.panTo(this.getPosition());
$scope.map.setZoom(15);
}));
}
// Init map
initialize();
}
}]);#map-canvas {
width: 500px;
height: 500px;
} <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<div ng-app="myApp">
<div ng-controller="MapCtrl" ng-init="initMap()">
<div id="map-canvas"></div>
<select id="type" ng-model="selectedItem" ng-change="filterMarkers()" >
<option value="">Please select category</option>
<option value="computer science">computer science</option>
<option value="electronic system">electronic system</option>
<option value="communication thoery">communication thoery</option>
<option value="english">english</option>
<option value="optical&fiber optics">optical&fiber optics</option>
<option value="Digital Electronics">Digital Electronics</option>
<option value="signal&systems">signal&systems</option>
</select>
</div>
</div>