javascript - 谷歌地图;将位置卡添加到标记

Question

正如您在下图中看到的，div(左上角)显示了当前标记地址/方向/保存..

这是使用来自谷歌地图的嵌入式 iframe 代码完成的。但是如何使用自定义“编码” 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);
    }
});

Answer 1

jsbin with my solution

背景:

我需要更好的解决鼠标滚轮问题的方法 here和 here .获得我想要的行为的最佳方式是坚持使用 API，但我真的很喜欢嵌入式版本中显示的卡片。

方法:

1. 从嵌入式版本复制卡片代码和关联的 CSS。
2. 在 javascript 中，准备好后将卡片 html 附加到呈现的 map 中

我的自定义:

1. 取消“保存”选项，因为它不起作用。
2. 定位卡在右上角 - 查看附加在 javascript 中的 html，它使用绝对位置进行硬编码，您可以根据需要更改它或将其与类相关联。

希望这对你有用!