使用 jasascript 或 angularjs 为谷歌地图创建动态 url 表达式答案

【问题标题】：Create a dynamic url expression with jasascript or angularjs for google maps使用 jasascript 或 angularjs 为谷歌地图创建动态 url 表达式
【发布时间】：2015-10-11 01:54:53
【问题描述】：

我想使用谷歌地图 API 和 angularJS 或 JS 创建静态图像。

动态版很简单，我做了这样的事情：

<map center="50.575, 52.33" zoom="13" street-view-control="false" map-type-control="false">
    <marker position="{{site.geo}}" title="{{site.name}}" label="{{indexToLetters($index)}}" on-click="showInfoWindow(event, site.geo, site.name)" ng-repeat="site in sites"></marker>
</map>

将 ng-repeat 与标记元素结合使用会创建一个包含所有标记的地图。但是，我想将其导出为 PDF，而动态地图无法做到这一点，所以我必须像这样使用静态图像：

<img width="750" height="250" ng-src="http://maps.googleapis.com/maps/api/staticmap?center=50.575, 52.33&zoom=12&size=750x250&sensor=false&markers=HOW-TO-REPEAT-SITE.GEO????>

我不确定如何重复图片网址中的标记

提前感谢您的任何建议！

我

【问题讨论】：

标签： javascript angularjs google-maps google-maps-api-3 angularjs-ng-repeat

【解决方案1】：

您可以在控制器中构建图像 URL，然后执行以下操作：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.imgurl = constructImageUrl();
});

function constructImageUrl(){
    var urlbase = "https://maps.googleapis.com/maps/api/staticmap?center=Williamsburg,Brooklyn,NY&zoom=13&size=400x400&markers=color:blue%7Clabel:S";

    var markers = ["11211","11206","11222"];
 
    var imgurl = urlbase;
    for(var i in markers){
        imgurl += "%7C" + markers[i];
    }
    
    return imgurl;
}

<div ng-app="myApp"  ng-controller="myCtrl">
    <img ng-src="{{imgurl}}" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

对于其他任何偶然发现的人，这里是 Google 的静态地图 API 指南：https://developers.google.com/maps/documentation/static-maps/intro

【讨论】：