如何删除谷歌地图API的多义线3 [英] How to remove polylines of google maps api 3

问题描述

  $（＃chkRouteLines）有人可以告诉我为什么我不能使用此代码删除我的多段线：
 .click（function（）{
 
 var polyline = new google.maps.Polyline（{
 path：positions，
 strokeColor：＃FF0000，
 strokeOpacity ：1.0，
 strokeWeight：2，
 visible：true 
}）;; 
 
 if（$（this）.is（'：checked'））{ 
 polyline.setMap（map）; 
} else {
 polyline.setMap（null）; 
} 
}）
  

我在google maps api 3的文档中发现我需要做：setMap（null）..
但是这没有工作。

谢谢！

解决方案

对多段线的引用，它是$（＃chkRouteLines）。click函数的局部。如果您有一条多段线，请将其引用为全局。

  var polyline = null; //在全局范围中
 
 $（＃chkRouteLines）。click（function（）{
 if（！polyline ||！polyline.setMap）{
 polyline =新google.maps.Polyline（{
路径：位置，
 strokeColor：＃FF0000，
 strokeOpacity：1.0，
 strokeWeight：2，
 visible：true （$（this）.is（'：checked'））{
 polyline.setMap（map）; $ b $（
））; 
} 
 
 b} else {
 polyline.setMap（null）; 
} 
  

< a href =http://jsfiddle.net/jk1bdth3/ =nofollow>工作小提琴

如果您需要添加和删除多个不同的折线，一个数组通常有效。

代码片段：

$ b

var geocoder; var map; var polyline; positions = [new google.maps.LatLng（37.441883，-122.143019），new goog le.maps.LatLng（37.45296，-122.181725）]; function initialize（）{var map = new google.maps.Map（document.getElementById（map_canvas），{center：new google.maps.LatLng（37.4419， - 122.1419），zoom：13，mapTypeId：google.maps.MapTypeId.ROADMAP}）; $（＃chkRouteLines）。click（function（）{if（！polyline ||！polyline.setMap）{polyline = new google.maps.Polyline（{path：positions，strokeColor：＃FF0000，strokeOpacity：1.0 ，strokeWeight：2，visible：true}）;} if（$（this）.is（'：checked'））{polyline.setMap（map）;} else {polyline.setMap（null）;}}）} google .maps.event.addDomListener（window，load，initialize）;

  html，body，#map_canvas {height：90％;宽度：100％; margin：0px; < script src =https：//   

Can someone tell me why I can't remove my polylines with this code:

    $("#chkRouteLines").click(function () {

    var polyline = new google.maps.Polyline({
        path: positions,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2,
        visible: true
    }); ;

    if ($(this).is(':checked')) {
        polyline.setMap(map);
    } else {
        polyline.setMap(null);
    }
})

I found in the documentation of google maps api 3 that I need to do: setMap(null).. But this didn't work.

Thank you!

解决方案

You aren't retaining a reference to the polyline, it is local to the "$("#chkRouteLines").click" function. If you have one polyline, make the reference to it global.

var polyline = null; // in the global scope

$("#chkRouteLines").click(function () {
    if (!polyline || !polyline.setMap) {
      polyline = new google.maps.Polyline({
        path: positions,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2,
        visible: true
      }); 
    }

if ($(this).is(':checked')) {
    polyline.setMap(map);
} else {
    polyline.setMap(null);
}

working fiddle

If you need to add and remove multiple different polylines, an array usually works.

code snippet:

var geocoder;
var map;
var polyline;

positions = [new google.maps.LatLng(37.441883,-122.143019),
             new google.maps.LatLng(37.45296,-122.181725)];
function initialize() {
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    $("#chkRouteLines").click(function () {
        if (!polyline || !polyline.setMap) {
          polyline = new google.maps.Polyline({
            path: positions,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2,
            visible: true
          }); 
        }

    if ($(this).is(':checked')) {
        polyline.setMap(map);
    } else {
        polyline.setMap(null);
    }
})


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

html, body, #map_canvas {
    height: 90%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
<input id="chkRouteLines" value="click" type="checkbox" />

这篇关于如何删除谷歌地图API的多义线3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！