按下按钮菜单时如何显示Google地图绘制工具

Question

我在我的网站上有谷歌地图;
用户只能看跟踪其他用户的路线，或者点击“Aggiungi Itinerario”自己添加路线。

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

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

var el = document.getElementById('aggiungiItinerario'); 
 
el.onclick = addRouteMap; 
 

 
function initialize() { 
 
\t var mapProp ={ 
 
\t \t center: new google.maps.LatLng(43.026938, 12.375857), 
 
\t \t zoom: 7, 
 
\t \t mapTypeId: google.maps.MapTypeId.ROADMAP 
 
\t \t }; 
 
\t 
 
\t var map =new google.maps.Map(document.getElementById("googlemaps"),mapProp); 
 
\t 
 

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

 
/*function button(){ 
 
\t var control = document.createElement('div'); 
 
\t google.maps.event.addDomListener(control, 'click', function() {...}); 
 
\t control.index = 1; 
 
\t googlemaps.controls[google.maps.ControlPosition.TOP_RIGHT].push(control); 
 
} 
 
google.maps.event.addDomListener(window, 'load', button); 
 
*/ 
 

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

 
\t  \t \t ] 
 
    \t } 
 
\t }); 
 
\t 
 
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

代码片段：

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(){ 
 
\t var control = document.createElement('div'); 
 
\t google.maps.event.addDomListener(control, 'click', function() {...}); 
 
\t control.index = 1; 
 
\t 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); 
 
}

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

<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. 
 
\t \t \t \t </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>