Tag: 谷歌地图

谷歌地图看起来在div内部移动

我在使用谷歌地图时遇到问题。 我将地图JS加载到一个文件中，我使用ajax（和jquery）附加一个模态div，其中包含地图。 我得到的东西如下图所示： 但是，当我“关闭”模态（删除div，因此，删除地图）并尝试再次打开它时，会出现问题： 除了看起来不完整之外，看起来地图认为它的左上角是div中的一些像素。 我向你保证，因为当我尝试移动地图时，它会刷新其内容并删除地图中的“不可见”（在这种情况下是不可见的）部分。 我要离开这里用来显示地图的代码（虽然这很简单）。 var marker = null, geocoder, latLng, map = null; geocoder = new google.maps.Geocoder(); latLng = new google.maps.LatLng(41.3865, 2.1648); var myOptions = { zoom: 16, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: false }; if(map === null) { map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions); } function clearOverlays() { if (marker !== null) […]

从数据层中删除所有function

我使用了类似的东西： var map; function initialize() { map = new google.maps.Map(document.getElementById(‘map-canvas’), { zoom: 4, center: {lat: -28, lng: 137.883} }); map.data.loadGeoJson(‘https://storage.googleapis.com/maps-devrel/google.json’); } google.maps.event.addDomListener(window, ‘load’, initialize); 将geojson形状文件加载到我的地图的map.data图层。 在形状文件中，有几个“要素”类定义要在地图上绘制的多边形。 直到这里我没有问题。 稍后，我想在另一个上加载另一个geojson文件（替换地图上绘制的’features’）。 当您只是将另一个文件加载到另一个文件上时，它只会将其重绘到另一个文件上。 在加载到新的geojson形状文件之前，如何清除所有要素的map.data图层？ 我已经尝试使用带有循环的map.data.remove(feature) ，但我似乎无法从map.data层获得所有function。

如何访问Google Maps InfoBox中的Div？

我正在尝试使用jquery的$(‘#divname’)在信息框中选择一个 ，当地图上的任何标记被点击时，Google地图会生成该信息框。 问题：当我在点击标记后尝试使用$(“#gallery”)访问div时，也就是在该标记的click事件监听器内部，没有任何反应。 我尝试使用console.log($(“#gallery”).html())从click侦听器获取该div中包含的html，并返回null ！ 我该如何选择这个div！？ 单击“事件侦听器代码段” // Create Listeners markers[i]._index = i; google.maps.event.addListener(markers[i], ‘click’, function() { infoboxes[this._index].open(map, markers[this._index]); infoboxes[this._index].show(); console.log($(‘#gallery’).html()); }）; 信息框片段代码 for( i = 0; i < json.length; i++) { // Place markers on map var latLng = new google.maps.LatLng(json[i].lat, json[i].lng); var marker = new google.maps.Marker({ position: latLng, map: map }); markers.push(marker); // […]

从google maps api json获取formatted_address

我想从json数组中获取formatted_adress。 示例链接可以是http://maps.googleapis.com/maps/api/geocode/json?latlng=55.397563,10.39870099999996& sensor = false var url = “http://maps.googleapis.com/maps/api/geocode/json?latlng=”+latlng+”&sensor=false”; $.getJSON(url, function(data) { var adress = data[‘formatted_address’]; alert(adress); }); 但我得到“未定义”

Google Maps API v3仅在页面刷新后加载

我正在为我正在处理的网页摆弄Google Maps API。 我现在的问题是，地图完全按照我的意图加载，但仅在刷新页面后才加载。 如果我不刷新页面，我看到的就是canvas。 如果我离开页面并返回到该页面，问题仍然存在，因此调用地图initialize似乎是一个问题。 代码： #map_canvas { width: 670px; height: 400px; background-color: #CCC; } function initialize() { var myLatLng = new google.maps.LatLng(31.247681, 121.449504); var map_canvas = document.getElementById(‘map_canvas’); var map_options = { center: new google.maps.LatLng(31.248195, 121.447431), zoom: 16, mapTypeControl: false, panControl: false, zoomControlOptions: { position: google.maps.ControlPosition.LEFT_CENTER }, streetViewControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP } var map […]

当标记位于打开的信息框后面时 – 使用InfoBox插件Google Maps API v3进行事件鼠标hover

我在使用Google Maps API的v3时遇到了问题，并使用InfoBox插件专门针对此可用性问题用例： 由于我的地图需要在将鼠标hover在每个相应标记上时打开自定义信息框，因此当地图上有2个靠近的标记时，即使其中一个标记位于当前打开的信息框后面将鼠标hover在另一个旁边标记上时，它会在鼠标hover在标记上时触发（即使它位于当前打开的信息框后面），另一个信息框阻碍当前/先前打开的信息框 我在这里通过另一张海报跟踪问答流程： 谷歌地图API v3使用InfoBox插件的事件鼠标hover并遵循推荐的代码，但我无法理解如何防止打开信息框后面的标记在信息框关闭之前不要触发。 var gpoints = []; function initializeMap1() { var Map1MileLatLang = new google.maps.LatLng(39.285900,-76.570000); var Map1MileOptions = { mapTypeControlOptions: { mapTypeIds: [ ‘Styled’] }, mapTypeControl: false, zoom: 14, center: Map1MileLatLang, //mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeId: ‘Styled’ }; var Map1Mile = new google.maps.Map(document.getElementById(“map_canvas”), Map1MileOptions); var styledMapType = new google.maps.StyledMapType(styles, { name: ‘Styled’ });//new […]

将标签放在GeoJson数据收到的Google地图多边形上

我想在多边形上放置带有信息（或带有标签的div）的标签，这些多边形由下面的代码片段绘制。 样式属性已成功应用于要素（Polygon类型）。 有人知道如何在这些要素中添加文本，这些文本将显示在多边形的中心吗？ function handleGeoJson(data) { map.data.addGeoJson(data); map.data.setStyle(function(feature) { if (feature.getProperty(‘isColorful’)) { color = feature.getProperty(‘color’); } return /** @type {google.maps.Data.StyleOptions} */( { fillColor : color, strokeColor : color, strokeWeight : 1, }); }); map.data.setStyle(featureStyle); }

如何使用google maps API制作搜索特定半径周围项目的表单？

我正在一个网站上工作，我想在Google地图上围绕当前位置或某个手动地址制作一个圆圈。 用户可以选择是否要围绕当前位置或他们将提供的随机地址进行圈选。 （用户可以选择将手动地址放在当前位置，如下图所示） 现在我们还需要确保圆圈具有特定的半径（ 距当前位置0-20 / 70km ），用户也需要确定。 （ 当前位置下方的线将决定用户可在此处移动的半径0-70km ） 例如：用户想要从当前位置创建一个圆圈直到30KM，或者用户想要从一些随机地址创建一个圆圈直到20KM。 我用来制作搜索范围搜索栏的HTML代码是 ： 问题陈述： （1）我想知道我需要进行哪些更改或需要添加的代码，以便围绕特定半径搜索项目。 我想，我需要整合代码谷歌地图圈，但我不知道如何做到这一点。 （2）在网站上搜索半径命中时，底部会显示以下选项/屏幕：

我创建的Google Maps V3 Circle＆Circle不匹配

我使用Google Maps V3 API创建了一个圆圈，并尝试制作一个半径相同的标记圈。 问题：我创建的那个是倾斜的，而谷歌地图的那个是一个很好的圆形圈。 什么地方出了错？ Google Maps V3 Circle Code // Draw search circle search_circle = new google.maps.Circle; search_circle.setCenter(target_latlng); search_circle.setRadius(travel_time * average_speed); search_circle.setMap(map);

右键单击Div（信息框）已禁用。 我该如何启用它

我正在使用Google Maps V3 API的Infobox插件。 http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html 问题：当我右键单击信息框div时，没有任何反应。 对于作为父信息框div的子元素的任何div也是如此。 但是我有一个输入框，其中包含一些我希望能够选择并右键单击复制的文本。 如果我不能正确点击它，怎么办呢？ 更重要的是，如何启用右键点击？ 例 http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/infobox-basic.html JS代码 不起作用 var infoboxOptions = { content: boxText, disableAutoPan: true, maxWidth: 0, pixelOffset: new google.maps.Size(0, 0), zIndex: null, infoBoxClearance: new google.maps.Size(5, 5), closeBoxURL: ”, isHidden: true, pane: “floatPane”, enableEventPropagation: false, contextmenu: true };