如何在谷歌地图中为标记添加描述窗口 [英] How to add descrption window to markers in google maps
本文介绍了如何在谷歌地图中为标记添加描述窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好
我是google地图和javascript的新手。我想要实现的是，当我加载谷歌地图时，用户应该能够通过点击在他希望的任何位置添加标记/图钉。我现在能够做到这一点，我想要添加的是，如果用户点击引脚被添加，那么应该还有一个描述窗口，用户可以在该引脚上添加。说当我点击一个位置添加一个图钉我也应该能够插入一些描述，如我的家等。到目前为止，我的代码是我的代码。非常感谢
<！DOCTYPE html>
< html>
< head>
< title>在 UI事件中访问参数 < / title >
< meta name = < span class =code-string> viewport content = initial-scale = 1.0，user-可伸缩=无>
< meta charset = utf-8>
< style>
html，body，＃map-canvas {
height：100％;
保证金：0px;
填充：0px
}
< / 样式 >
< script src = https： //maps.googleapis.com/maps/api/js?v=3.exp&sensor=false\"></script>
< script>
function initialize（）{
var mapOptions = {
zoom ： 4 ，
center： new google.maps.LatLng（-25。 363882 ， 131 。 044922 ）
} ;
var map = new google.maps。 Map （ document .getElementById（' map -canvas'），
mapOptions）;
google.maps.event.addListener（map，' 点击'， function （e）{
placeMarker（e.latLng，map）;
}）;
}
function placeMarker（position，map）{
var marker = new google.maps.Marker（{
position：position，
map：map
}）;
map.panTo（position）;
}
google.maps.event.addDomListener（ window ，' load'，初始化）;
< / script>
< / head >
< body>
< div id = map-canvas> < / div >
< / 正文 >
< / html >
解决方案
要在Google地图中添加标记说明，请参阅：
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple [ ^ ]
希望你能找到你的解决方案!!!
您可以在google标记上尝试弹出：
< ！DOCTYPE html >
< html >
< head >
< meta http-equiv = content-type content = text / html; charset = UTF-8 >
< title > - jsFiddle demo < / title >
< script type =' text / javascript' src =' https://ajax.googleapis.com/ajax/libs/jquery /1.7.2/jquery.min.js'> < / script >
< link rel = 样式表 type = text / css href = / css / normalize .css >
< script type = text / javascript src = http://code.jquery.com/ui/1。 8.18 / jquery-ui.min.js > < / script >
< link rel = 样式表 type = text / css href = /css/result-light.css\">
< script type=' text / javascript' src = http://maps.google.com/maps/ api / js？sensor = false& .js > < / script >
< link rel = stylesheet 类型 = text / css href = http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css > ;
< style type =' text / css' >
#map_canvas {width：400px; height：400px;}
< / style >
< script 类型 =' text / javascript ' > // <！[CDATA [
（function（）{
function initialize（）{
var mapOptions = {
zoom：15，
panControl：false，
mapTypeControl：false，
center：new google.maps.LatLng（41.89924，-87.62756），
mapTypeId：google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map（document.getElementById（'map_canvas'），
mapOptions）;
var image ='http://maps.google.com/mapfiles/kml/pal2/icon2.png';
var myLatLng = new google.maps.LatLng（41.89924，-87.62756）;
var marker = new google.maps.Marker（{
position：myLatLng，
map：map，
animation：google.maps.Animation.DROP，
icon ：image，
}）;
var styles = [
{
stylers：[
{hue：＃ff9f67}，
{saturation：-20}，
{gamma：1.50}
]
}，{
featureType：road，
elementType：geometry，
stylers：[
{亮度：100}，
{可见性：简化}
]
}，{
featureType：road，
elementType：labels.text。 stroke，
stylers：[
{visibility：off}
]
}，
{
featureType：water ，
elementType：geometry.fill，
样式：[
{visibility：on}，
{color：＃ffa066}，
{亮度：80}
]
}
];
map.setOptions（{styles：styles}）;
// jQuery对话框的代码为infowindow
var popup =
Hello
I am a very new person to the google maps and javascript. What i am trying to achieve is that when i load a google map the user should be able to add a marker/pin on any location he wishes via click. I am able to do this now what i am trying to add is that if a user clicks the pin gets added there should also be a description window which user could add on that pin. Say when i click on a location to add a pin i should also be able to insert some description like "my home" etc.Below is my code so far. Thanks anyways
<!DOCTYPE html> <html> <head> <title>Accessing arguments in UI events</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script> function initialize() { var mapOptions = { zoom: 4, center: new google.maps.LatLng(-25.363882,131.044922) }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); google.maps.event.addListener(map, 'click', function(e) { placeMarker(e.latLng, map); }); } function placeMarker(position, map) { var marker = new google.maps.Marker({ position: position, map: map }); map.panTo(position); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>解决方案To add description on your markers in google map refer:
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple[^]
Hope you'll find your solution!!!
You can try this for popup on google marker:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> - jsFiddle demo</title> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <link rel="stylesheet" type="text/css" href="/css/normalize.css"> <script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="/css/result-light.css"> <script type='text/javascript' src="http://maps.google.com/maps/api/js?sensor=false&.js"></script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css"> <style type='text/css'> #map_canvas{width:400px;height:400px;} </style> <script type='text/javascript'>//<![CDATA[
(function(){ function initialize() { var mapOptions = { zoom: 15, panControl: false, mapTypeControl: false, center: new google.maps.LatLng(41.89924, -87.62756), mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); var image = 'http://maps.google.com/mapfiles/kml/pal2/icon2.png'; var myLatLng = new google.maps.LatLng(41.89924, -87.62756); var marker = new google.maps.Marker({ position: myLatLng, map: map, animation: google.maps.Animation.DROP, icon: image, }); var styles = [ { stylers: [ { hue: "#ff9f67" }, { saturation: -20 }, { gamma: 1.50 } ] },{ featureType: "road", elementType: "geometry", stylers: [ { lightness: 100 }, { visibility: "simplified" } ] },{ featureType: "road", elementType: "labels.text.stroke", stylers: [ { visibility: "off" } ] }, { featureType: "water", elementType: "geometry.fill", stylers: [ { visibility: "on" }, { color: "#ffa066" }, { lightness: 80 } ] } ]; map.setOptions({styles: styles}); // Code for jQuery dialog as infowindow var popup=
这篇关于如何在谷歌地图中为标记添加描述窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
