个人中心
gpt4 book ai didi

jquery - 如何在 Google Maps API 中使信息窗口可编辑？

转载 作者：行者123 更新时间：2023-12-01 04:31:12 26 4
gpt4 key购买 nike

我想在点击信息窗口时使其可编辑。

这是我的代码:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <meta name="viewport" content="width=device-width,minimum-scale=0.3,maximum-scale=5.0,user-scalable=yes">

    </head>
<body onload="initialize()" onunload="GUnload()">

<style type="text/css">
*{
    margin:0;
    padding:0;
}
</style>

<div id="map_canvas" style="width: 500px; height: 300px;"></div>

<div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div>
<div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div>

<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA-7cuV3vqp7w6zUNiN_F4uBRi_j0U6kJrkFvY4-OX2XYmEAa76BSNz0ifabgugotzJgrxyodPDmheRA&sensor=false"type="text/javascript"></script>

<script type="text/javascript">
var aFn;
//**********
function initialize() {
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map_canvas"));
      var center=new GLatLng(39.9493, 116.3975);
      map.setCenter(center, 13);

      aFn=function(x,y) {
        var point =new GPoint(x,y)
        point = map.fromContainerPixelToLatLng(point);
        var marker = new GMarker(point,{draggable:true});

        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml("<b>wwww</b>");
        });

        map.addOverlay(marker);

        $(".b").draggable({
          revert: true,
          revertDuration: 0
        });

        $("#map_canvas").droppable({
          drop: function(event,ui) {
             aFn(event.pageX-$("#map_canvas").offset().left,event.pageY-$("#map_canvas").offset().top);
          }
        });
      }
   }
</script>
</body>
</html>

最佳答案

您可能想查看contentEditable属性如下例所示:

function initialize() {
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map_canvas"));
      var center = new GLatLng(39.9493, 116.3975);
      map.setCenter(center, 13);

      var marker = new GMarker(new GLatLng(39.9493, 116.3975),{draggable:true});

      GEvent.addListener(marker, 'click', function() {
         marker.openInfoWindowHtml('<div contentEditable="true" ' +
                                   'style="height: 100px; overflow: auto;">' +
                                   'wwww</div>');
      });

      map.addOverlay(marker);
   }
}

这应该适用于所有现代浏览器。

contentEditable Example

关于jquery - 如何在 Google Maps API 中使信息窗口可编辑？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2441546/

26 4 0
文章推荐： python - 如何修改 HSV 图像数据的 numpy 数组中的像素值？
文章推荐： node.js - NPM/Nodejs : Can't install scrypt@6. 0.3
文章推荐： python - 在 session 中保留 Django 用户
文章推荐： python - Pandas boxplot 覆盖/覆盖 matplotlib 图
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com