Question

我想使用JS在Google地图上绘制圆圈。

我的代码：

按钮代码：

INDEX.HTML

    <button type="button" class="btn btn-primary btn-sm" id="test1" onclick="DrawCircle()">Wyświetlk mapę

Div for map（index.html）：

<div id="googleMap" style="width:500px;height:380px;">
    <script>mapping()</script>
</div>

绘制地图和一个样本圆（函数.js）的函数

function mapping(){

    var citymap = 
    {
          warsaw: 
          {
            center: {lat: 52.14, lng: 21.1},  
            population: 1740000
          }
    }


    function initialize() {
      var mapProp = {
        center:new google.maps.LatLng(52.13 ,19.02),
        zoom:6,
        mapTypeId:google.maps.MapTypeId.ROADMAP
      };


    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    for (var city in citymap) 
    {

        var cityCircle = new google.maps.Circle({
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35,
          map: map,
          center: citymap[city].center,
          radius: Math.sqrt(citymap[city].population) * 30
    });
    }

    }

    google.maps.event.addDomListener(window, 'load', initialize);
}

绘制圆圈的功能：

function DrawCircle()
    {

        draw_circle = new.google.maps.Circle({

            center: {lat: 52.94, lng: 20.1},
            radius: 2000,
            strokeColor: "#000",
            strokeOpacity: 0.6,
            strokeWeight: 2;
            fillColor: "#0099AA",
            fillOpacity: 0.25,
            map: map
        });

    }

我有一个错误： Uncaught SyntaxError：意外的标识符（索引）：198未捕获的ReferenceError：未定义映射

什么改变/添加（repiar）？我无法在这里和google api文档中找到解决这个问题的方法。

我很乐意帮助

Answer 1

您可能在定义之前调用mapping()。

您的JavaScript代码位于HTML页面中的哪个位置？

确保您在发送mapping()之前确认您发布的JavaScript阻止在HTML 中。

但是我认为mapping()作为一个函数不是很有用，因为你已经使用了一个调用load的{{1}}监听器。

因此，我建议完全删除此initialize并删除代码周围的<script>mapping()</script>，无论您在何处放置代码，它都应自动运行。只需确保在初始化代码运行后调用function mapping() { ... }。例如，您可以将其放入DrawCircle函数本身。

（顺便说一句，我不确定行initialize是否符合您的要求。我认为您至少需要一个draw_circle = ...才能防止意外创建全局可变的。）

另外我建议正确缩进你的代码，不清楚不同的函数范围在哪里。

编辑：我注意到另一个问题：var无效代码（new.google.maps.circle是关键字）。我想你想要new没有第一个点？如果此语法错误导致您的整个外部JavaScript文件无法加载（特别是因为您已经在评论中解释，将其包含在new google.maps.circle区域中），它也会解释为什么<head>无法找到。

您应该修复此错误，并且还应确保在加载页面时打开开发人员控制台（在浏览器中按F12），然后查看控制台选项卡，因为您会看到报告的语法错误（可能是指向错误发生在文件中的确切位置的链接。）

Google Map + JS（添加圈子）

1 个答案: