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

问题描述

如下图所示，div(左上角)显示当前标记地址/方向/保存..

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

这是使用谷歌地图中嵌入的 iframe 代码完成的.但是你怎么能用自定义的编码"地图做同样的事情?

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 和我的解决方案

背景:

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

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.

方法:

1. 从嵌入式版本复制卡片代码和相关的 css.
2. 在 javascript 中，当它准备好时，将卡片 html 附加到渲染的地图中

我的自定义:

1. 取消保存"选项，因为它不起作用.
2. 右上角的定位卡片 - 查看附加在 javascript 中的 html，它使用绝对位置硬编码，如果您愿意，您可以更改它或将其与类相关联.

希望这对你有用！

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