Question

我需要将一些php变量传递给我的谷歌地图初始化的外部js文件。当然地图本身应该使用这些变量。目前我无法正确加载我的地图并收到错误

TypeError: map is undefined

我甚至无法传递我的变量！我试图使用最简单的方式，如

我的php

<script type="text/javascript"> 
    var marker = <?php echo json_encode($marker_img); ?>; //this should send the marker image url
    var latitude = '<?php echo $post_latitude; ?>'; //this is the latitude
    var longitude = '<?php echo $post_longitude; ?>'; //this is the long
    var paddress = '<?php echo $address; ?>'; //this is the address name
</script>

现在我想我在js中做错了什么：

var geocoder;
var map;
function initialize_map() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(latitude, longitude);
    var myOptions = {
        scrollwheel: false,
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"administrative","elementType":"labels","stylers":[{"saturation":"-100"}]},{"featureType":"administrative","elementType":"labels.text","stylers":[{"gamma":"0.75"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"lightness":"-37"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f9f9f9"}]},{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"saturation":"-100"},{"lightness":"40"},{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"labels.text.fill","stylers":[{"saturation":"-100"},{"lightness":"-37"}]},{"featureType":"landscape.natural","elementType":"labels.text.stroke","stylers":[{"saturation":"-100"},{"lightness":"100"},{"weight":"2"}]},{"featureType":"landscape.natural","elementType":"labels.icon","stylers":[{"saturation":"-100"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"saturation":"-100"},{"lightness":"80"}]},{"featureType":"poi","elementType":"labels","stylers":[{"saturation":"-100"},{"lightness":"0"}]},{"featureType":"poi.attraction","elementType":"geometry","stylers":[{"lightness":"-4"},{"saturation":"-100"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"},{"visibility":"on"},{"saturation":"-95"},{"lightness":"62"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{"featureType":"road","elementType":"all","stylers":[{"lightness":20}]},{"featureType":"road","elementType":"labels","stylers":[{"saturation":"-100"},{"gamma":"1.00"}]},{"featureType":"road","elementType":"labels.text","stylers":[{"gamma":"0.50"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"saturation":"-100"},{"gamma":"0.50"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"},{"saturation":"-100"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"lightness":"-13"}]},{"featureType":"road.highway","elementType":"labels.icon","stylers":[{"lightness":"0"},{"gamma":"1.09"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"},{"saturation":"-100"},{"lightness":"47"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"lightness":"-12"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"saturation":"-100"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"},{"lightness":"77"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"lightness":"-5"},{"saturation":"-100"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"saturation":"-100"},{"lightness":"-15"}]},{"featureType":"transit.station.airport","elementType":"geometry","stylers":[{"lightness":"47"},{"saturation":"-100"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]},{"featureType":"water","elementType":"geometry","stylers":[{"saturation":"53"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"lightness":"-42"},{"saturation":"17"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"lightness":"61"}]}],
    },
    map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function codeAddress(address) {
    geocoder.geocode( { 'address': paddress}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new MarkerWithLabel({
                position: results[0].geometry.location,
                map: map, //Here I get the error
                icon: pointer, //Here I don't get any image
                labelContent: paddress, //here I don't get any address
                labelAnchor: new google.maps.Point(22, 0),
                labelClass: "labels",
                labelStyle: {opacity: 1.0},
            });
        } else {
        //alert("Geocode was not successful for the following reason: " + status);
        }
    });
}
initialize_map();
codeAddress('location');

它显示的地图，我看到它但没有参数。怎么了？???提前谢谢。

Answer 1

快速修复
返回map，否则你的codeAddress函数将在不等待前一个函数的情况下运行;）

function initialize_map() {
 ....
 return map;
}

window.map = initialize_map();
codeAddress('location');

不确定你的php内容，如果有效，一个问题可能是另一个范围。

尝试将变量映射到全局window对象，如地图所示..（快速和肮脏的修复）

Answer 2

我收到一条javascript错误：Uncaught TypeError: Cannot read property 'setCenter' of undefined就在这一行：

map.setCenter(results[0].geometry.location);

主要问题是mapOptions变量定义末尾的逗号，它使map变量的initialize_map变量的以下声明成为本地的initialize_map函数在map中，通过将全局;更改为分号（// var marker = <?php echo json_encode($marker_img); ?>; //this should send the marker image url var latitude = '40.7127837'; //this is the latitude var longitude = '-74.0059413'; //this is the long var paddress = 'New York, NY'; //this is the address name var geocoder; var map; function initialize_map() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(latitude, longitude); var myOptions = { scrollwheel: false, zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, styles: [{ "featureType": "administrative", "elementType": "all", "stylers": [{ "visibility": "on" }, { "lightness": 33 }] }, { "featureType": "administrative", "elementType": "labels", "stylers": [{ "saturation": "-100" }] }, { "featureType": "administrative", "elementType": "labels.text", "stylers": [{ "gamma": "0.75" }] }, { "featureType": "administrative.neighborhood", "elementType": "labels.text.fill", "stylers": [{ "lightness": "-37" }] }, { "featureType": "landscape", "elementType": "geometry", "stylers": [{ "color": "#f9f9f9" }] }, { "featureType": "landscape.man_made", "elementType": "geometry", "stylers": [{ "saturation": "-100" }, { "lightness": "40" }, { "visibility": "off" }] }, { "featureType": "landscape.natural", "elementType": "labels.text.fill", "stylers": [{ "saturation": "-100" }, { "lightness": "-37" }] }, { "featureType": "landscape.natural", "elementType": "labels.text.stroke", "stylers": [{ "saturation": "-100" }, { "lightness": "100" }, { "weight": "2" }] }, { "featureType": "landscape.natural", "elementType": "labels.icon", "stylers": [{ "saturation": "-100" }] }, { "featureType": "poi", "elementType": "geometry", "stylers": [{ "saturation": "-100" }, { "lightness": "80" }] }, { "featureType": "poi", "elementType": "labels", "stylers": [{ "saturation": "-100" }, { "lightness": "0" }] }, { "featureType": "poi.attraction", "elementType": "geometry", "stylers": [{ "lightness": "-4" }, { "saturation": "-100" }] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [{ "color": "#c5dac6" }, { "visibility": "on" }, { "saturation": "-95" }, { "lightness": "62" }] }, { "featureType": "poi.park", "elementType": "labels", "stylers": [{ "visibility": "on" }, { "lightness": 20 }] }, { "featureType": "road", "elementType": "all", "stylers": [{ "lightness": 20 }] }, { "featureType": "road", "elementType": "labels", "stylers": [{ "saturation": "-100" }, { "gamma": "1.00" }] }, { "featureType": "road", "elementType": "labels.text", "stylers": [{ "gamma": "0.50" }] }, { "featureType": "road", "elementType": "labels.icon", "stylers": [{ "saturation": "-100" }, { "gamma": "0.50" }] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [{ "color": "#c5c6c6" }, { "saturation": "-100" }] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{ "lightness": "-13" }] }, { "featureType": "road.highway", "elementType": "labels.icon", "stylers": [{ "lightness": "0" }, { "gamma": "1.09" }] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [{ "color": "#e4d7c6" }, { "saturation": "-100" }, { "lightness": "47" }] }, { "featureType": "road.arterial", "elementType": "geometry.stroke", "stylers": [{ "lightness": "-12" }] }, { "featureType": "road.arterial", "elementType": "labels.icon", "stylers": [{ "saturation": "-100" }] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [{ "color": "#fbfaf7" }, { "lightness": "77" }] }, { "featureType": "road.local", "elementType": "geometry.fill", "stylers": [{ "lightness": "-5" }, { "saturation": "-100" }] }, { "featureType": "road.local", "elementType": "geometry.stroke", "stylers": [{ "saturation": "-100" }, { "lightness": "-15" }] }, { "featureType": "transit.station.airport", "elementType": "geometry", "stylers": [{ "lightness": "47" }, { "saturation": "-100" }] }, { "featureType": "water", "elementType": "all", "stylers": [{ "visibility": "on" }, { "color": "#acbcc9" }] }, { "featureType": "water", "elementType": "geometry", "stylers": [{ "saturation": "53" }] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [{ "lightness": "-42" }, { "saturation": "17" }] }, { "featureType": "water", "elementType": "labels.text.stroke", "stylers": [{ "lightness": "61" }] }], }; map = new google.maps.Map(document.getElementById("map"), myOptions); } function codeAddress(address) { geocoder.geocode({ 'address': paddress }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new MarkerWithLabel({ position: results[0].geometry.location, map: map, //Here I get the error //icon: pointer, //Here I don't get any image labelContent: paddress, //here I don't get any address labelAnchor: new google.maps.Point(22, 0), labelClass: "labels", labelStyle: { opacity: 1.0 }, }); } else { //alert("Geocode was not successful for the following reason: " + status); } }); } initialize_map(); codeAddress('location');）来初始化全局html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }。

proof of concept fiddle

代码段

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map"></div>

＆＃13;

element.contains(node)

＆＃13;

element.contains(datetime)

＆＃13;

将变量带从php传递到javascript google map

2 个答案: