如何更改与angularjs和谷歌地图的图标标记 [英] How to change icon marker with angularjs and google maps

问题描述

在IM的PhoneGap项目正在与angularjs谷歌地图（ https://github.com/allenhwkim/ angularjs - 谷歌 - 地图）
我需要改变默认图标标记与自定义图像。
这是我的控制器code：

core.js

  //地图标记控制器app.controller（'markersController'，函数（$范围，$编译）{$ scope.infoWindow = {
    标题：'标题'，
    内容：内容
};$ scope.markers = [
    {
        '标题'：'位置＃1，
        '内容'：'Lorem存有悲坐阿梅德，consectetur adipiscing ELIT。评级机构一个灵猫麦格纳，
        位置：40.7112，-74.213]
    }，
    {
        '标题'：'位置＃2，
        '内容'：'Lorem存有悲坐阿梅德，consectetur adipiscing ELIT。评级机构一个灵猫麦格纳，
        位置：40.7243，-74.2014]
    }，
    {
        '标题'：'位置＃3'，
        '内容'：'Lorem存有悲坐阿梅德，consectetur adipiscing ELIT。评级机构一个灵猫麦格纳，
        位置：40.7312，-74.1923]
    }
];$ scope.showMarker =函数（事件）{    $ scope.marker = $ scope.markers [this.id]
    $ scope.infoWindow = {
        标题：$ scope.marker.title，
        内容：$ scope.marker.content
    };
    $ $范围适用于（）。
    $ scope.showInfoWindow（事件'标记的信息，this.getPosition（））;
 }
}）;
 

这是我markers.html

 ＆LT; D​​IV NG控制器=markersController级=地图，全屏容器＆GT;
＆LT;地图缩放=8中心=[ -  26.82，-54.84]级=全屏＆GT;  ＆LT;信息窗口ID =标记信息＆GT;
    ＆LT; D​​IV NG-非绑定=＆GT;
      ＆LT;强类=markerTitle＆GT; {{infoWindow.title}}＆LT; / STRONG＆GT;
      ＆LT; D​​IV CLASS =markerContent＆GT;
        ＆所述p为H.; {{infoWindow.content}}＆下; / P＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; /信息窗口＆GT;  ＆LT;标记NG重复=（ID，标记）的标记ID ={{ID}}
  位置={{marker.location}}
  上点击=showMarker（事件，$指数）＆GT;
  ＆LT; /标记＆GT; ＆LT; /图＆GT;
＆LT; / DIV＆GT;
 

解决方案

如果你只有一个标记，你可以直接将它设置在标记指令：

 ＆LT;标记NG重复=（ID，标记）的标记ID ={{ID}}
            位置={{marker.location}}
            上点击=showMarker（事件，$指数）
            图标=yourIconUrl.png＆GT;
＆LT; /标记＆GT;
 

如果您对每个项目不同的标记，你需要做的第一件事就是到图标属性添加到您的项目：

  $ scope.markers = [
    {
        '标题'：'位置＃1，
        '内容'：'Lorem存有悲坐阿梅德，consectetur adipiscing ELIT。评级机构一个灵猫麦格纳，
        位置：40.7112，-74.213]
        '图标'：'yourIconUrl.png
    }，
    {
        '标题'：'位置＃2，
        '内容'：'Lorem存有悲坐阿梅德，consectetur adipiscing ELIT。评级机构一个灵猫麦格纳，
        位置：40.7243，-74.2014]
        '图标'：'yourIconUrl.png
    }，
    {
        '标题'：'位置＃3'，
        '内容'：'Lorem存有悲坐阿梅德，consectetur adipiscing ELIT。评级机构一个灵猫麦格纳，
        位置：40.7312，-74.1923]
        '图标'：'yourIconUrl.png
    }
];
 

然后，你需要使用它在你的HTML，将其添加到标记指令：

 ＆LT;标记NG重复=（ID，标记）的标记ID ={{ID}}
        位置={{marker.location}}
        上点击=showMarker（事件，$指数）
        图标={{marker.icon}}＆GT;
＆LT; /标记＆GT;
 

就是这样，希望有所帮助。

请参阅更多信息的文档：
的https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/docs/index.html

im working in phonegap project with angularjs google maps (https://github.com/allenhwkim/angularjs-google-maps) I need to change default icon marker with custom images. This is my controller code:

core.js

// Map Markers Controller

app.controller('markersController', function($scope, $compile){

$scope.infoWindow = {
    title: 'title',
    content: 'content'
};

$scope.markers = [
    {
        'title' : 'Location #1',
        'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing     elit. Cras a viverra magna',
        'location'  : [40.7112, -74.213]
    }, 
    {
        'title' : 'Location #2',
        'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
        'location'  : [40.7243, -74.2014]
    }, 
    {
        'title' : 'Location #3',
        'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
        'location'  : [40.7312, -74.1923]
    }
];

$scope.showMarker = function(event){

    $scope.marker = $scope.markers[this.id];
    $scope.infoWindow = {
        title: $scope.marker.title,
        content: $scope.marker.content
    };
    $scope.$apply();
    $scope.showInfoWindow(event, 'marker-info', this.getPosition());
 }
});

And this is my markers.html

<div ng-controller="markersController" class="map-fullscreen-container">
<map zoom="8" center="[-26.82, -54.84]" class="fullscreen">

  <info-window id="marker-info">
    <div ng-non-bindable="">
      <strong class="markerTitle">{{ infoWindow.title }}</strong>
      <div class="markerContent">
        <p>{{ infoWindow.content }}</p>
      </div>
    </div>
  </info-window>

  <marker ng-repeat="(id, marker) in markers" id="{{ id }}" 
  position="{{marker.location}}" 
  on-click="showMarker(event, $index)" >
  </marker>

 </map>
</div>

解决方案

If you only have one marker, you can set it up directly on your marker directive:

<marker ng-repeat="(id, marker) in markers" id="{{ id }}" 
            position="{{marker.location}}" 
            on-click="showMarker(event, $index)"
            icon="yourIconUrl.png" >
</marker>

If you have different markers for each item, the first thing you need to do is to add the icon property to your items:

$scope.markers = [
    {
        'title' : 'Location #1',
        'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
        'location'  : [40.7112, -74.213],
        'icon' : 'yourIconUrl.png'
    }, 
    {
        'title' : 'Location #2',
        'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
        'location'  : [40.7243, -74.2014],
        'icon' : 'yourIconUrl.png'
    }, 
    {
        'title' : 'Location #3',
        'content' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a viverra magna',
        'location'  : [40.7312, -74.1923],
        'icon' : 'yourIconUrl.png'
    }
];

Then you need to use it on your html, by adding it to the marker directive:

<marker ng-repeat="(id, marker) in markers" id="{{ id }}" 
        position="{{marker.location}}" 
        on-click="showMarker(event, $index)"
        icon="{{marker.icon}}" >
</marker>

That's it, hope that helps.

Please refer to the documentation for more info: https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/docs/index.html

这篇关于如何更改与angularjs和谷歌地图的图标标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！