javascript 谷歌地图; 将位置卡添加到标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26346076/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google maps; add place card to marker
提问by numediaweb
As you can see on the following image, the div(top left) shows the current marker address/directions/ save..
如下图所示，div（左上角）显示当前标记地址/方向/保存..
This was done using the embedded iframecode from google maps. But how can you do the same with custom "coded" map?
这是使用iframe谷歌地图的嵌入代码完成的。但是你怎么能用自定义的“编码”地图做同样的事情呢？
geocoder = new google.maps.Geocoder();
geocoder.geocode({
"address": nw.google_pointer
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: parseInt(nw.google_zoom),
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: nw.google_pointer
});
} else {
console.log('Geocode was not successful for the following reason: ' + status);
}
});
采纳答案by jcsmesquita
jsbin with my solution
jsbin 与我的解决方案
Background:
背景：
I needed a better solution to the mouse wheel scroll problem hereand here. The best way to get the behaviour I wanted was to stick with the API, but I really like the card shown in the embedded version.
我需要一个更好的解决方案来解决这里和这里的鼠标滚轮滚动问题。获得我想要的行为的最好方法是坚持使用 API，但我真的很喜欢嵌入版本中显示的卡片。
Method:
方法：
- Copied card code and associated css from embedded version.
- In javascript, append card html into the rendered map when it's ready
- 从嵌入式版本复制卡代码和相关的 css。
- 在 javascript 中，当它准备好时，将卡片 html 附加到渲染的地图中
My Customizations:
我的定制：
- Took off the "Save" option because it doesn't work.
- Positioned card on the top right - look at the html that is appended in javascript, it's hardcoded with absolute position, you can change this or associate it with a class if you prefer.
- 取消“保存”选项，因为它不起作用。
- 位于右上角的卡片 - 查看附加在 javascript 中的 html，它是硬编码的绝对位置，如果您愿意，您可以更改它或将其与类相关联。
Hope this works for you!
希望这对你有用！
回答by user4757345
I added second map in @jcsmesquita answer but there are same place cards on two maps : http://jsbin.com/vixehodaka/edit?html,css,js,output
我在@jcsmesquita 答案中添加了第二张地图，但两张地图上有相同的位置卡： http://jsbin.com/vixehodaka/edit?html,css,js,output
so I changed javascript code a bit : jsbin.com/dezorezohe/edit?html,css,js,output
所以我稍微改变了 javascript 代码： jsbin.com/dezorezohe/edit?html,css,js,output
