Question

创建谷歌地图并在给定位置居中非常简单（见下文）。通过像markers=color:blue%7Clabel:S%7C11211%7C11206%7C11222这样的方式创建谷歌地图并在其上显示标记也很简单。

我如何创建一个如下所示的简单居中地图，但在正中心添加一个标记？感谢

<img alt="Map" src="http://maps.google.com/maps/api/staticmap?center=+AUBURN+WA+98001&amp;zoom=14&amp;size=400x400&amp;sensor=false">

Answer 1

我猜地图会自动适合显示指定的标记， here you will find

标记位置

每个标记描述符必须包含一组一个或多个位置   定义标记在地图上的放置位置。这些位置可能是   指定为纬度/经度值或地址。这些   使用竖线字符（|）分隔位置。

位置参数定义标记在地图上的位置。如果   该位置不在地图上，该标记不会出现在地图上   构造的图像，提供中心和缩放参数   提供。但是，如果未提供这些参数，则为静态   地图服务器将自动构建包含的图像   提供标记。（参见下面的隐式定位。）

Answer 2

这里我将逐步提供代码

NSString *strLat = [NSString stringWithFormat:@"%f",_message.latitude];
NSString *strLong = [NSString stringWithFormat:@"%f",_message.longitude];
NSString *strURL = [NSString stringWithFormat:@"%@center=%@,%@&zoom=15&size=200x200&markers=color:red%%7Clabel:C%%7C%@,%@&key=%@",https://maps.googleapis.com/maps/api/staticmap?,strLat,strLong,strLat,strLong,GOOGLE_API_BROWSER_KEY];
NSLog(@"strURL %@",strURL);
strURL = [strURL stringByReplacingOccurrencesOfString:@"%%" withString:@"%"];

现在你有了一个图片网址

Answer 3

如果地图可以在顶部添加您自己的居中背景图像：）

background: url('yourmarker.png' ) center no-repeat, url(http://maps.google.com/maps/api/staticmap?center=AUBURN+WA+98001&zoom=14&amp&size=400x400);

Answer 4

Google静态地图地址参考：

https://developers.google.com/maps/documentation/maps-static/dev-guide#Addresses

这是我最近使用的JavaScript函数。传递给函数的addressElements参数是地址元素的数组，例如['10 Main St', 'Brownsville', 'MS', '27123', 'USA']。

您可以看到我已经注释掉了中心和缩放属性，因为在定义标记时不需要这些属性。要删除标记，只需取消注释这两行并注释掉标记行即可。

您显然可以自己构造此图像，但是我使用URLSearchParams简化了参数创建过程，并自动对其进行了URL编码。

function getGoogleMapsImage(addressElements) {
    var image = Nucleus.element('img');
    image.width = '256';
    image.height = '256';
    var joined = addressElements.join(',');
    var params = new URLSearchParams();
    //params.append('center', joined);
    //params.append('zoom', '15');
    params.append('size', '256x256');
    params.append('maptype', 'roadmap');
    params.append('key', 'YOUR_API_KEY_HERE');
    params.append('markers', 'color:red|label:C|' + joined);
    var url = 'https://maps.googleapis.com/maps/api/staticmap?' + params.toString();
    image.src = url;
    return image;
}

将标记添加到静态谷歌地图的中心

4 个答案: