Javascript 如何在谷歌地图之间画线
我想做一些像这样的东西： 但是使用google maps api，我可以设置richmarkers，但我不知道如何在richmarkers之间划出一条线，以下是我的代码：Javascript 如何在谷歌地图之间画线,javascript,html,api,google-maps,Javascript,Html,Api,Google Maps,我想做一些像这样的东西： 但是使用google maps api，我可以设置richmarkers，但我不知道如何在richmarkers之间划出一条线，以下是我的代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Rich Marker</title> <style> body{ m
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rich Marker</title>
<style>
body{
margin: 0 auto;
}
#map, #map2 {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.my-marker {
background: white;
border: 2px solid #fff;
padding: 3px;
}
.my-marker img{
width: 50px;
height: 50px;
}
.my-other-marker {
background: blue;
border: 2px solid #fff;
padding: 3px;
}
#log {
clear: both;
}
#content {
padding-left: 5px;
}
#marker-content {
width: 350px;
height: 150px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var script = '<script src="src/richmarker';
script += '.js"><' + '/script>';
document.write(script);
</script>
<script>
/**
* Called on the intiial page load.
*/
var map;
var tedi;
var unidos;
var fundefam;
var down1;
var ceaa;
var ceiaa;
var hog;
var cre;
var andar;
var puerta;
var reto;
var efeta;
function init() {
var mapCenter = new google.maps.LatLng(25.7195811,-100.3436205);
var ted = new google.maps.LatLng(25.655346, -100.392785);
var unido = new google.maps.LatLng(25.675220, -100.358649);
var fundefa = new google.maps.LatLng(25.664799, -100.327432);
var downm1 = new google.maps.LatLng(25.663897, -100.329036);
var cea = new google.maps.LatLng(25.625733, -100.290375);
var ceia = new google.maps.LatLng(25.747410, -100.295102);
var hoga = new google.maps.LatLng(25.658873, -100.242196);
var cree = new google.maps.LatLng(25.687754, -100.356118);
var andares = new google.maps.LatLng(25.466424, -100.173198);
var puertas = new google.maps.LatLng(25.661694, -100.400546);
var retos = new google.maps.LatLng(25.682272, -100.325996);
var effeta = new google.maps.LatLng(25.675491, -100.338032);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
tedi = new RichMarker({
position: ted,
map: map,
draggable: false,
content: '<div class="my-marker"><div>TEDI</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>'
});
unidos = new RichMarker({
position: unido,
map: map,
draggable: false,
content: '<div class="my-marker"><div>UNIDOS</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>'
});
fundefam = new RichMarker({
position: fundefa,
map: map,
draggable: false,
content: '<div class="my-marker"><div>FUNDEFAM</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>'
});
down1 = new RichMarker({
position: downm1,
map: map,
draggable: false,
content: '<div class="my-marker"><div>DOWN</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/><div>MTY</div></div></div>'
});
ceaa = new RichMarker({
position: cea,
map: map,
draggable: false,
content: '<div class="my-marker"><div>CEAA</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>'
});
ceiaa = new RichMarker({
position: ceia,
map: map,
draggable: false,
content: '<div class="my-marker"><div>CEIA</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>'
});
hog = new RichMarker({
position: hoga,
map: map,
draggable: false,
content: '<div class="my-marker"><div>HOGA</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>'
});
cre = new RichMarker({
position: cree,
map: map,
draggable: false,
content: '<div class="my-marker"><div>CREE</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>'
});
andar = new RichMarker({
position: andares,
map: map,
draggable: false,
content: '<div class="my-marker"><div>ANDARES</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>'
});
puerta = new RichMarker({
position: puertas,
map: map,
draggable: false,
content: '<div class="my-marker"><div>PUERTAS</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div><div>ABIERTAS</div></div>'
});
reto = new RichMarker({
position: retos,
map: map,
draggable: false,
content: '<div class="my-marker"><div>RETOS</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>'
});
efeta = new RichMarker({
position: effeta,
map: map,
draggable: false,
content: '<div class="my-marker"><div>EFFETA</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>'
});
var count = 1;
google.maps.event.addListener(marker, 'click', function() {
window.location = "tedi.html";
});
}
function log(msg) {
var log = document.getElementById('log');
log.innerHTML = msg;
}
function setMarkerContent() {
var content = document.getElementById('marker-content').value;
marker.setContent(content);
}
function toggleMap() {
if (marker.getMap() == map) {
marker.setMap(map2);
} else {
marker.setMap(map);
}
}
function toggleFlat() {
marker.setFlat(!marker.getFlat());
}
function toggleVisible() {
marker.setVisible(!marker.getVisible());
}
function toggleAnchor() {
var anchor = marker.getAnchor();
if (anchor == 9) {
anchor = 1;
} else {
anchor++;
}
marker.setAnchor(anchor);
}
// Register an event listener to fire when the page finishes loading.
google.maps.event.addDomListener(window, 'load', init);
</script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-12846745-20']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' === document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<h3>Rich Marker v3</h3>
<div id="map"></div>
<div id="log"></div>
</body>
</html>
富标记
身体{
保证金：0自动；
}
#地图#地图2{
位置：相对位置；
垫底：75%；
身高：0；
溢出：隐藏；
}
.我的马克笔{
背景：白色；
边框：2倍实心#fff；
填充：3倍；
}
.我的马克笔{
宽度：50px；
高度：50px；
}
.我的另一支马克笔{
背景：蓝色；
边框：2倍实心#fff；
填充：3倍；
}
#日志{
明确：两者皆有；
}
#内容{
左侧填充：5px；
}
#标记内容{
宽度：350px；
高度：150像素；
}
var脚本=“”；
文件。书写（脚本）；
/**
*在初始页面加载时调用。
*/
var映射；
var tedi；
var unidos；
var fundefam；
var-down1；
变种ceaa；
var-ceiaa；
野猪；
var-cre；
瓦兰达尔；
普尔塔变种；
瓦雷托；
var efeta；
函数init（）{
var mapCenter=new google.maps.LatLng（25.7195811，-100.3436205）；
var ted=new google.maps.LatLng（25.655346，-100.392785）；
var unido=new google.maps.LatLng（25.675220，-100.358649）；
var fundefa=new google.maps.LatLng（25.664799，-100.327432）；
var downm1=新的google.maps.LatLng（25.663877，-100.329036）；
var cea=new google.maps.LatLng（25.625733，-100.290375）；
var ceia=new google.maps.LatLng（25.747410，-100.295102）；
var hoga=newgoogle.maps.LatLng（25.658873，-100.242196）；
var cree=new google.maps.LatLng（25.687754，-100.356118）；
var andares=new google.maps.LatLng（25.466424，-100.173198）；
var puertas=newgoogle.maps.LatLng（25.661694，-100.400546）；
var retos=new google.maps.LatLng（25.682272，-100.325996）；
var effeta=new google.maps.LatLng（25.675491，-100.338032）；
map=new google.maps.map（document.getElementById（'map'）{
缩放：12，
中心：地图中心，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
tedi=新富氏标记({
职位：特德，
地图：地图，
可拖动：错误，
内容：“TEDI”
});
unidos=新的RichMarker({
职位：工发组织，
地图：地图，
可拖动：错误，
内容：“UNIDOS”
});
fundefam=新的RichMarker({
职位：基金会，
地图：地图，
可拖动：错误，
内容：“FUNDEFAM”
});
down1=新的RichMarker({
位置：downm1，
地图：地图，
可拖动：错误，
内容：“唐姆蒂”
});
ceaa=新富氏标记({
职位：cea，
地图：地图，
可拖动：错误，
内容：“CEAA”
});
ceiaa=新的RichMarker({
职位：ceia，
地图：地图，
可拖动：错误，
内容：“CEIA”
});
hog=新的RichMarker({
职位：霍加，
地图：地图，
可拖动：错误，
内容：“霍加”
});
cre=新的RichMarker({
职位：克里，
地图：地图，
可拖动：错误，
内容：“克里”
});
andar=新的RichMarker({
职位：安达雷斯，
地图：地图，
可拖动：错误，
内容：“安达雷斯”
});
puerta=新的RichMarker({
职位：普尔塔斯，
地图：地图，
可拖动：错误，
内容：葛根
});
reto=新的RichMarker({
职位：雷托斯，
地图：地图，
可拖动：错误，
内容：'RETOS'
});
efeta=新的RichMarker({
位置：effeta，
地图：地图，
可拖动：错误，
内容：“EFFETA”
});
var计数=1；
google.maps.event.addListener（标记'click'，函数（）{
window.location=“tedi.html”；
});
}
函数日志（msg）{
var log=document.getElementById（'log'）；
log.innerHTML=msg；
}
函数setMarkerContent（）{
var content=document.getElementById（'marker-content'）。值；
marker.setContent（content）；
}
函数toggleMap（）{
if（marker.getMap（）==map）{
marker.setMap（map2）；
}否则{
marker.setMap（map）；
}
}
函数toggleFlat（）{
marker.setFlat（！marker.getFlat（））；
}
函数toggleVisible（）{
marker.setVisible（！marker.getVisible（））；
}
函数toggleAnchor（）{
var-anchor=marker.getAnchor（）；
如果（锚==9）{
锚=1；
}否则{
anchor++；
}
标记器。设置锚（锚）；
}
//注册一个事件侦听器，以便在页面完成加载时触发。
google.maps.event.addDomListener（窗口'load'，init）；
var _gaq=_gaq | |[]；
_gaq.push（[''设置帐户'，'UA-12846745-20']）；
_gaq.push（[''u trackPageview']）；
（功能（）{
var ga=document.createElement（'script'）；ga.type='text/javascript'；ga.async=true；
ga.src=（'https:'==document.location.protocol？'https://ssl' : 'http://www“）+”.google analytics.com/ga.js'；
var s=document.getElementsByTagName（'script'）[0]；s.parentNode.insertBefore（ga，s）；
})();
富标记v3
var polyPath = [ted,unido,fundefa,downm1,cea,ceia,hoga,cree,andares,puertas,retos,effeta];
var polyline = new google.maps.Polyline({path: polyPath, map: map});