Google Maps Application Developing —— Marker
Quick Start
It is quite easy to put a marker on your map with the default look. to create a marker , you need to use the google.maps.Marker object. It only takes one parameter , which is an object of type google.maps.MarkerOptions.
MarkerOptions has several properties that you can use to make the marker look and behave in different ways. Position and map are must:
1 2 3 4 | var marker = new google.maps.Marker({ position: new google.maps.LatLng(37.09,-95.71), map: map }); |
Other Properties of MarkerOptions
title is using to add a tooltip
icon is using to change the icon
Google has a collection of standard icons that you can use on your map. Most of them use a similar URL that looks like this:
http://gmaps-samples.googlecode.com/svn/trunk/markers/color/markerx.png
where color is one of the following values:
• blue
• green
• orange
• pink
• red
and x is a number between 1 and 99. If you want a marker with no number, use the filename blank.png.
Adding an InfoWindow
1 2 3 4 5 6 7 | var infoWindow = new google.maps.InfoWindow({ content: '<div style="width:250px">InfoWindow</div>' }); google.maps.event.addListener(marker, 'click' , function (){ infoWindow.open(map, marker); }); |
作者:Create Chen
出处:http://technology.cnblogs.com
说明:文章为作者平时里的思考和练习,可能有不当之处,请博客园的园友们多提宝贵意见。
本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架