谷歌地图 (API v2) + jQuery UI 对话框,不可停止的拖动问题

发布于 2024-10-07 17:47:11 字数 972 浏览 3 评论 0原文

嘿!


我正在使用 Google Maps API v2(出于某种原因,它必须是 v2)和 jQuery UI 1.8.6(以及 jQuery 1.4.6)。 1)。

情况是: 我在模式对话框中有一张地图。

问题是: 当我点击信息“气球”的阴影并拖动地图时,它不会停止拖动。

我真的不知道应该提供哪个代码,所以,如果您希望我专门添加一些代码,请告诉我。

function createMarker(latitude, longitude, num, color, id_local) {

var iconOptions = {};
iconOptions.width = 32;
iconOptions.height = 32;
iconOptions.primaryColor = ''+color;
iconOptions.label = ''+num;
iconOptions.cornerColor = "#82c4e8";
iconOptions.strokeColor = "#000000";

var newIcon = MapIconMaker.createLabeledMarkerIcon(iconOptions);
//
var point = new GLatLng(latitude,longitude,0);
//
var marker = new GMarker(point, {
    icon: newIcon
});


var html = $('#info_mapa_'+id_local).html();
GEvent.addListener(marker, 'click', function() {
    marker.openInfoWindowHtml(html);
});

return marker;
}


谢谢。

Hey!

I'm using Google Maps API v2 (for some reason, it has to be the v2) and jQuery UI 1.8.6 (and jQuery 1.4.1).

The situation is:
I have a map inside a modal dialog.

The Problem is:
When i click on the shadow of the info "balloon" and drag the map, it won't stop dragging.

I really don't know which code should i provide, so, if you want me to put some code specifically just let me know.

function createMarker(latitude, longitude, num, color, id_local) {

var iconOptions = {};
iconOptions.width = 32;
iconOptions.height = 32;
iconOptions.primaryColor = ''+color;
iconOptions.label = ''+num;
iconOptions.cornerColor = "#82c4e8";
iconOptions.strokeColor = "#000000";

var newIcon = MapIconMaker.createLabeledMarkerIcon(iconOptions);
//
var point = new GLatLng(latitude,longitude,0);
//
var marker = new GMarker(point, {
    icon: newIcon
});


var html = $('#info_mapa_'+id_local).html();
GEvent.addListener(marker, 'click', function() {
    marker.openInfoWindowHtml(html);
});

return marker;
}

Thank you.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

你与昨日 2024-10-14 17:47:11

我的老板决定花一天时间迁移到 v3 并摆脱这个愚蠢的问题。谢谢大家。

My boss decided to spent a day migrating to v3 and get rid of this stupid problem. Thanks everybody.

小瓶盖 2024-10-14 17:47:11

更新

演示:http://jsbin.com/ofuze4

演示:https://so.lucafilosofi。 com/google-maps-api-v2-jquery-ui-dialog-non-stoppable-dragging-problem/

伪代码:

JS:

$(function() {
    $("#j-dialog").dialog({
        resizable: false,
        width: 500,
        height: 400,
        open: function() {
            initialize();
        }
    });
});
function initialize() {
    var latlng = new google.maps.LatLng( - 34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map($("#map_canvas")[0], myOptions);

    var contentString = $('#map-info').text();

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

var newIcon = 'http://cdn2.iconfinder.com/data/icons/oxygen/48x48/actions/note2.png';

var marker = new google.maps.Marker({ 
    icon: newIcon,
    position: latlng,
    map: map,
    title: "Hello World!"
});

    google.maps.event.addListener(marker, 'click',
    function() {
        infowindow.open(map, marker);
    });
}

CSS:

<style>#map_canvas { margin:0 auto; width:450px; height: 340px }</style>

HTML:

    <div title="google maps inside jquery dialog" id="j-dialog">    
      <div id="map_canvas">
      </div>  
    </div>

希望有帮助

参考:

UPDATE

DEMO: http://jsbin.com/ofuze4

DEMO: https://so.lucafilosofi.com/google-maps-api-v2-jquery-ui-dialog-non-stoppable-dragging-problem/

PSEUDO CODE:

JS:

$(function() {
    $("#j-dialog").dialog({
        resizable: false,
        width: 500,
        height: 400,
        open: function() {
            initialize();
        }
    });
});
function initialize() {
    var latlng = new google.maps.LatLng( - 34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map($("#map_canvas")[0], myOptions);

    var contentString = $('#map-info').text();

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

var newIcon = 'http://cdn2.iconfinder.com/data/icons/oxygen/48x48/actions/note2.png';

var marker = new google.maps.Marker({ 
    icon: newIcon,
    position: latlng,
    map: map,
    title: "Hello World!"
});

    google.maps.event.addListener(marker, 'click',
    function() {
        infowindow.open(map, marker);
    });
}

CSS:

<style>#map_canvas { margin:0 auto; width:450px; height: 340px }</style>

HTML:

    <div title="google maps inside jquery dialog" id="j-dialog">    
      <div id="map_canvas">
      </div>  
    </div>

hope this help

REFERENCE:

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文