用线连接起来的标记：谷歌地图API [英] linking markers together using a line: google maps api

问题描述

我期待code一个功能，当用户点击一个标记，然后会出现当用户点击了一个标记，将其连接到用线previous标记。我已经使用这个谷歌的API文档尝试过，但似乎无法得到功能正常工作。谁能帮助？

下面是code：

  google.maps.event.addListener（地图，点击功能（事件）{
VAR的标记=新google.maps.Marker（{
      位置：event.latLng，
      地图：地图
    }）;    聚=新google.maps.Polyline（{
    则strokeColor：'＃000000'，
    strokeOpacity，用于：1.0，
    strokeWeight，用于：3
  }）;
    poly.setMap（地图）;    map.addListener（'点击'，addLatLng）;
  }  功能addLatLng（事件）{
  VAR路径= poly.getPath（）;  path.push（event.latLng）;  VAR的标记=新google.maps.Marker（{
  位置：event.latLng，
  标题：'＃'+ path.getLength（）
  ）;
 

解决方案

最简单的事情是使折线全球，然后执行 addLatLng 事件处理函数内的一切：

  //全球折线
VAR地图;
VAR聚=新google.maps.Polyline（{
  则strokeColor：'＃000000'，
  strokeOpacity，用于：1.0，
  strokeWeight，用于：3
}）;//添加标记，点折线路径
功能addLatLng（事件）{
  VAR路径= poly.getPath（）;
  path.push（event.latLng）;
  VAR的标记=新google.maps.Marker（{
    位置：event.latLng，
    标题：'＃'+ path.getLength（）
    地图：地图
  }）;
};
 

code片断：

\r

\r

//全局变量\r
VAR地图;\r
VAR聚=新google.maps.Polyline（{\r
  则strokeColor：'＃000000'，\r
  strokeOpacity，用于：1.0，\r
  strokeWeight，用于：3\r
}）;\r
\r
函数初始化（）{\r
  地图=新google.maps.Map（\r
    的document.getElementById（map_canvas的），{\r
      中心：新google.maps.LatLng（37.4419，-122.1419）\r
      变焦：13，\r
      mapTypeId设为：google.maps.MapTypeId.ROADMAP\r
    }）;\r
  map.addListener（'点击'，addLatLng）;\r
  //折线添加到地图\r
  poly.setMap（地图）;\r
}\r
\r
功能addLatLng（事件）{\r
  VAR路径= poly.getPath（）;\r
  path.push（event.latLng）;\r
  VAR的标记=新google.maps.Marker（{\r
    位置：event.latLng，\r
    标题：'＃'+ path.getLength（）\r
    地图：地图\r
  }）;\r
};\r
google.maps.event.addDomListener（窗口，在负荷，初始化）;

\r

HTML，\r
身体，\r
#map_canvas {\r
  高度：100％;\r
  宽度：100％;\r
  保证金：0像素;\r
  填充：0像素\r
}

\r

＆LT;脚本SRC =htt​​ps://maps.googleapis.com/maps / API / JS＆GT;＆LT; / SCRIPT＆GT;\r
＆LT; D​​IV ID =map_canvas的＆GT;＆LT; / DIV＆GT;

\r

\r

\r

I am looking to code a feature that when a user clicks a marker appears then when the user clicks for the next marker it will connect it to the previous marker using a line. I have tried using the google api documentation for this but cannot seem to get the feature to work. can anyone help?

Here is the code:

google.maps.event.addListener(map, "click", function(event) {
var marker = new google.maps.Marker({
      position: event.latLng,
      map: map
    });

    poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
    poly.setMap(map);

    map.addListener('click', addLatLng);
  }

  function addLatLng(event) {
  var path = poly.getPath();

  path.push(event.latLng);

  var marker = new google.maps.Marker({
  position: event.latLng,
  title: '#' + path.getLength(),
  );

解决方案

Simplest thing is to make the polyline global, then do everything inside the addLatLng event handler function:

// global polyline
var map;
var poly = new google.maps.Polyline({
  strokeColor: '#000000',
  strokeOpacity: 1.0,
  strokeWeight: 3
});

// add marker and point to polyline path
function addLatLng(event) {
  var path = poly.getPath();
  path.push(event.latLng);
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
};

code snippet:

// global variables
var map;
var poly = new google.maps.Polyline({
  strokeColor: '#000000',
  strokeOpacity: 1.0,
  strokeWeight: 3
});

function initialize() {
  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
    });
  map.addListener('click', addLatLng);
  // add the polyline to the map
  poly.setMap(map);
}

function addLatLng(event) {
  var path = poly.getPath();
  path.push(event.latLng);
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
};
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

这篇关于用线连接起来的标记：谷歌地图API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！