谷歌地图;将地点卡添加到标记 [英] Google maps; add place card to marker

问题描述

如下图所示， div （左上角）显示当前标记地址/路线/保存。

<这是通过谷歌地图中嵌入的 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 =新的google.maps.Marker（{
 map：map，
 position：results [0] .geometry.location，
 title：nw.google_pointer 
}）; 
} else {
 console.log（'由于以下原因，Geocode不成功：'+ status'; 
} 
}）; 
  

解决方案

jsbin与我的解决方案

背景：

我需要更好的解决方案来解决鼠标滚轮滚动问题这里和此处。获得我想要的行为的最佳方式是坚持使用API​​，但我非常喜欢嵌入式版本中显示的卡片。

$ b 方法：
$ b

1. 从嵌入版本复制卡片代码和关联的css。
   
2. 在javascript中，追加卡片准备好HTML的时候将它们放入渲染地图中
   

我的定制：

1. 取消保存选项，因为它不起作用。


2. 右上角的卡片位置 - 查看html附加在javascript中，它的绝对位置是硬编码的，如果您愿意，可以更改它或将它与类关联。
适合你！



As you can see on the following image, the div (top left) shows the current marker address/directions/ save..

This was done using the embedded iframe code from google maps. But how can you do the same with custom "coded" map?

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);
    }
});

解决方案

jsbin with my solution

Background:

I needed a better solution to the mouse wheel scroll problem here and 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.

Method:

1. Copied card code and associated css from embedded version.
2. In javascript, append card html into the rendered map when it's ready

My Customizations:

1. Took off the "Save" option because it doesn't work.
2. 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.

Hope this works for you!

这篇关于谷歌地图;将地点卡添加到标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！