2015-12-09 142 views
1

我有這個plunker其中顯示以[40.74,-74.18]爲中心的谷歌地圖。添加圖標到谷歌地圖

http://plnkr.co/edit/BfYggKO8nDolhmpq92dq?p=preview

<!DOCTYPE html> 
<html ng-app="ngMap"> 

<head> 
    <title>Simle Map</title> 
    <meta name="description" content="Simple Map"> 
    <meta name="keywords" content="ng-map,AngularJS,center"> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script> 
    <script src="https://code.angularjs.org/1.3.15/angular.js"></script> 
    <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
</head> 

<body> 
    <ng-map center="[40.74, -74.18]"></ng-map> 
</body> 

</html> 

代碼使用angularjs。谷歌地圖angularjs庫使用是http://ngmap.github.io/

我想添加下面的圖標在附近的點,如[50.74,-74.18]。如何才能做到這一點?

enter image description here

+1

http://ngmap.github.io/ #/ marker-simple.html?或者你的問題還有更多? – sinanspd

+0

非常接近。 Upvoted您的評論。但是如果我想用我自己的圖標圖像添加我自己的標記呢? – user781486

+1

然後閱讀文檔和頁面左側的鏈接http://ngmap.github.io/#/custom-marker.html –

回答

2

你可以爲指令指定icon屬性設置自定義標記圖標:

<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script> 
 
<script src="https://code.angularjs.org/1.3.15/angular.js"></script> 
 
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
 
<div ng-app="ngMap"> 
 
    <ng-map center="[54.74, -74.18]" style="height: 480px;" zoom="4" > 
 
     <marker position="50.74, -74.18" title="Hello World!" icon="http://s19.postimg.org/scc4cevlv/marker_Icon.png"></marker> 
 
    </ng-map> 
 
</div>

Plunker