个人中心
gpt4 book ai didi

javascript - 使用 json 将 infoWindow 添加到 map 标记

转载 作者：行者123 更新时间：2023-12-02 16:26:27 25 4
gpt4 key购买 nike

我有一个简单的脚本，可以在 map 上添加标记，数据已从 json 中获取。我想为所有标记添加一个基本的信息窗口，这样当您单击它时，它会显示“Cartier”。你能告诉我 InfoWindow 代码做错了什么吗？代码如下。

<!DOCTYPE html>
    <html>
    <head>
    <style>
    html, body, #map-canvas {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    </style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>

var map;

function initialize() {
  var mapOptions = {
        zoom: 2,
        center: {lat: 37.275, lng: 22.549},
        mapTypeId: google.maps.MapTypeId.TERRAIN
      };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  // Create a <script> tag and set the USGS URL as the source.
  var script = document.createElement('script');

  script.src = 'http://pastebin.com/raw.php?i=7X956uB3';
  document.getElementsByTagName('head')[0].appendChild(script);

  map.data.setStyle(function(feature) {
    var jstores = feature.getProperty('jstores');
    return {
      icon: getCircle(jstores),
      title: (jstores)
    };
  });

  var contentString = '<div id="content">Cartier</div>';

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

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

function getCircle(jstores) {
  var circle = {
        path: google.maps.SymbolPath.CIRCLE,
        fillColor: 'red',
        fillOpacity: .2,
        scale: Math.sqrt(jstores) * 2,
        strokeColor: 'white',
        strokeWeight: .5
      };
  return circle;
}

function jewellery_stores(results) {
  map.data.addGeoJson(results);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
 <body>
   <div id="map-canvas"></div>
 </body>
</html>

示例 JSON:

jewellery_stores({ "type": "FeatureCollection","features": [
{"type": "Feature","geometry": {"type": "Point", "coordinates": [139.730407, 35.70883]},"properties": {"jstores": 106 }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [37.615556, 55.752222]},"properties": {"jstores": 94 }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [2.3524282, 48.8564528]},"properties": {"jstores": 89 }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [55.277067, 25.176594]},"properties": {"jstores": 66 }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [-0.1276597, 51.5072759]},"properties": {"jstores": 64 }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [114.169551, 22.285261]},"properties": {"jstores": 63 }}]

预先感谢您，安德烈

最佳答案

您正在使用 Google Maps Javascript API v3 Data Layer

它支持点击监听器，允许您打开包含 JSON 中包含的属性的信息窗口。

map.data.addListener('click', function (e) {
    infowindow.setPosition(e.latLng);
    infowindow.setContent("hello world<br>jstores="+e.feature.getProperty("jstores")+"<br>"+e.latLng.toUrlValue(6));
    infowindow.open(map);
});

工作代码片段:

var map;
var infowindow = new google.maps.InfoWindow({});

function initialize() {
  var mapOptions = {
    zoom: 2,
    center: {
      lat: 37.275,
      lng: 22.549
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  // Create a <script> tag and set the USGS URL as the source.
  var script = document.createElement('script');

  script.src = 'https://pastebin.com/raw.php?i=7X956uB3';
  document.getElementsByTagName('head')[0].appendChild(script);

  map.data.setStyle(function(feature) {
    var jstores = feature.getProperty('jstores');
    return {
      icon: getCircle(jstores),
      title: (jstores)
    };
  });
}

function getCircle(jstores) {
  var circle = {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: 'red',
    fillOpacity: 0.2,
    scale: Math.sqrt(jstores) * 2,
    strokeColor: 'white',
    strokeWeight: 0.5
  };
  return circle;
}

function jewellery_stores(results) {
  map.data.addGeoJson(results);
  map.data.addListener('click', function(e) {
    infowindow.setPosition(e.latLng);
    infowindow.setContent("hello world<br>jstores=" + e.feature.getProperty("jstores") + "<br>" + e.latLng.toUrlValue(6));
    infowindow.open(map);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
html,
  body,
  #map-canvas {
    margin: 0;
    padding: 0;
    height: 100%;
  }
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>

关于javascript - 使用 json 将 infoWindow 添加到 map 标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28648766/

25 4 0
文章推荐： javascript - 无法从 jTemplate 输出中 Hook Click 事件
文章推荐： python-3.x - 从命令提示符执行脚本时无法导入opencv
文章推荐： python - 如何在OpenCV Python中设置框架的高度和宽度
文章推荐： javascript - 为什么不以浏览器特定的字节码发送 JavaScript 文件？
行者123
个人简介

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

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