带有邮政编码和自定义标记图像的Google地图

时间:2019-04-03 05:59:37

标签: javascript google-maps

我目前正在使用带有邮政编码和标准红色标记的Google Map静态地图。我想使用自定义的png图像代替红色标记。

我尝试在url中添加带有marker参数的图片的url,但它在地图中给出了错误。

<img src="https://maps.googleapis.com/maps/api/staticmap?center=v302t8&zoom=9&size=460x150&maptype=roadmap&key=APIKEY&markers=color:red%7Cv302t8" alt="">

我希望能够使用这种方法,而不是地理编码方法,因为它们的查询数量有限。

1 个答案:

答案 0 :(得分:1)

我不知道center的位置v302t8(错误的来源?)是什么,还是地图URL中的最后一个%7Cv302t8,所以我修改了上面的内容,如您所见下面。地图加载成功,并以"Tower of London"

为中心显示自定义标记图像

所选图像应为64px x 64px或更小。

https://maps.googleapis.com/maps/api/staticmap?center=51.507336, -0.074968&zoom=15&size=512x512&maptype=roadmap&key=<APIKEY>&markers=icon:http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/af/afeef641914e77b0950eb8b8317bfbf080b69ace_medium.jpg|51.507336, -0.074968

Static map - centred on City of London

更新: 使用png文件也可以-再次牢记标记图像的最大尺寸

https://maps.googleapis.com/maps/api/staticmap?center=51.507336, -0.074968&zoom=15&size=512x512&maptype=roadmap&key=<APIKEY>&markers=icon:https://cartoon.aminoapps.com/static/bower/emojify.js/images/emoji/skull.png|51.507336, -0.074968

Static map with transparent PNG image as marker