Question

我的网站上有谷歌地图;
用户只需查看跟踪其他用户的路线或点击“Aggiungi Itinerario”并自行添加路线。

我的问题：谷歌绘图工具没有出现;我认为js文件有问题，但我不明白。

javascript：https://jsfiddle.net/rnkt7wtw/

var el = document.getElementById('aggiungiItinerario');
el.onclick = addRouteMap;

function initialize() {
	var mapProp ={
		center: new google.maps.LatLng(43.026938, 12.375857),
		zoom: 7,
		mapTypeId: google.maps.MapTypeId.ROADMAP
		};
	
	var map =new google.maps.Map(document.getElementById("googlemaps"),mapProp);
	

}
google.maps.event.addDomListener(window, 'load', initialize);

/*function button(){
	var control = document.createElement('div'); 
	google.maps.event.addDomListener(control, 'click', function() {...});
	control.index = 1;   
	googlemaps.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
}
google.maps.event.addDomListener(window, 'load', button);
*/

function addRouteMap(){
	console.log("Prova");
	var drawingManager = new google.maps.drawing.DrawingManager({
		drawingMode: null,
   		drawingControl: true,
    	drawingControlOptions: {
    		position: google.maps.ControlPosition.TOP_CENTER,
      			drawingModes: [
	        	google.maps.drawing.OverlayType.MARKER,
	        	google.maps.drawing.OverlayType.POLYLINE,

	   		]
    	}
	});
	
drawingManager.setMap(mapProp);
}

有人可以帮助我吗？

由于

Answer 1

我收到javascript错误未捕获的ReferenceError：mapProp未定义。

mapProp不是google.maps.Map个对象。您需要将map变量设为全局变量，并在drawingManager.setMap调用中使用它。

var el = document.getElementById('aggiungiItinerario');
el.onclick = addRouteMap;
var map;
function initialize() {
    var mapProp ={
        center: new google.maps.LatLng(43.026938, 12.375857),
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };

    map =new google.maps.Map(document.getElementById("googlemaps"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);

function addRouteMap(){
    console.log("Prova");
    var drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: null,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [
                google.maps.drawing.OverlayType.MARKER,
                google.maps.drawing.OverlayType.POLYLINE,

            ]
        }
    });

drawingManager.setMap(map);

proof of concept fiddle

代码段

＆＃13;

var el = document.getElementById('aggiungiItinerario');
el.onclick = addRouteMap;
var map;

function initialize() {
  var mapProp = {
    center: new google.maps.LatLng(43.026938, 12.375857),
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("googlemaps"), mapProp);


}
google.maps.event.addDomListener(window, 'load', initialize);

/*function button(){
	var control = document.createElement('div'); 
	google.maps.event.addDomListener(control, 'click', function() {...});
	control.index = 1;   
	googlemaps.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
}
google.maps.event.addDomListener(window, 'load', button);
*/

function addRouteMap() {
  console.log("Prova");
  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: null,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.POLYLINE,

      ]
    }
  });

  drawingManager.setMap(map);
}

＆＃13;

.l-box {
  padding: 1em;
  border-style: solid;
}
#googlemaps {
  height: 80vh;
}
.pure-g {
  letter-spacing: normal;
}

＆＃13;

<link href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css" rel="stylesheet" />
<link href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" rel="stylesheet" />
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places,drawing"></script>
<div class="pure-g">

  <div class="pure-menu pure-menu-horizontal">
    <a href="#" class="pure-menu-heading pure-menu-link">###</a>

    <ul class="pure-menu-list">
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">###</a>
      </li>
      <li class="pure-menu-item"><a href="#" class="pure-menu-link">###</a>
      </li>
      <li id="aggiungiItinerario" class="pure-menu-item"><a href="#" class="pure-menu-link">Aggiungi Itinerario</a>
      </li>
    </ul>

  </div>




  <div id="googlemaps" class="pure-u-1">

    <div class="l-box">

      <!--<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend eu dolor nec ultrices. In auctor aliquam nisi, vitae tincidunt magna blandit maximus. Donec dapibus, lectus sed tincidunt auctor, metus ligula porttitor eros, et dignissim nunc ante vitae ligula. Phasellus fermentum magna orci, in pharetra ipsum egestas et. Sed gravida venenatis pellentesque. Suspendisse metus quam, faucibus ac vehicula ac, hendrerit sit amet ligula. Phasellus eget sagittis velit.
				</p> -->
    </div>
  </div>


  <div class="pure-u-1 pure-u-md-1-2">
    <div class="l-box">
      <p>Suspendisse venenatis faucibus sem, ut porttitor nisi dictum eget. Aliquam mollis consectetur lobortis. Sed ultrices neque a neque vulputate, eu vestibulum libero sagittis. Phasellus consequat sollicitudin ligula vel laoreet. Integer maximus nisi
        quis diam congue pulvinar. Suspendisse maximus augue erat, non ultricies tortor commodo ac. Curabitur quis turpis commodo erat placerat feugiat. Phasellus pharetra sed purus ac eleifend.
      </p>
    </div>
  </div>


  <div class="pure-u-1 pure-u-md-1-2">
    <div class="l-box">
      <p>Integer erat nibh, ullamcorper vitae blandit vulputate, sagittis sed nulla. Mauris pulvinar tristique lorem at accumsan. Phasellus id nisl metus. Ut sed sapien vel urna fringilla euismod. Ut varius laoreet eros, et bibendum urna tristique eu. Donec
        scelerisque dapibus nulla id malesuada. Praesent tempus at elit nec facilisis. Nam eget nisl volutpat, aliquam massa sit amet, scelerisque tellus. Aliquam quis justo tempor, scelerisque augue id, mollis est. Integer et massa ullamcorper, sollicitudin
        nibh vitae, eleifend sem. Nulla leo ligula, ultrices a vehicula quis, maximus vitae mi. Praesent semper, nulla et convallis fringilla, neque ipsum malesuada nulla, nec efficitur enim magna vel eros. Quisque in sem sed dui maximus interdum. In
        ac odio purus.
      </p>
    </div>
  </div>

</div>

＆＃13;

当按下按钮菜单时，Google如何映射绘图工具

1 个答案: